Üye Girişi
Bağlan Google+ ile Bağlan Facebook ile Bağlan
Yeni Kayıt
Tüm Forumlar
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Yazılım Geliştirme
  • Projeler
  • Bu Konuda
Şimdi Ara

ul list yan yana getirme

Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
1 Misafir - 1 Masaüstü
5 sn
9
Cevap
0
Favori
9.290
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
0 oy
Öne Çıkar
Cevapla
Sayfa: 1
Giriş
Mesaj
  • herkese kolay gelsin. internetten tonlarca siteyi gezinmeme rağmen beceremedim. Böyle bir html kodum var menü yapmaya çalışıyorum. fakat bir türlü ul içindekileri yan yana getiremedim. Yardımlarınız için şimdiden teşekkürler
    <div class="sag-alt">
                        <div class="menu">
                            <ul>
                                <li><a hiref yazıyo>MAIN PAGE</a></li>
                                <li><a hiref yazıyo>WEB DESING</a></li>
                                <li><a hiref yazıyo>ANASAYFA</a></li>
                                <li><a hiref yazıyo>ANASAYFA</a></li>
                            </ul>
                        </div>
                    </div>

    buda css kodlarım 
    .sag-alt {
        background: #93c3d6;
    }
    .menu {
        background: #00709c;
    }
    .sag-alt .menu .li  {
        list-style: none;
    }

    .sag-alt .menu .li .a{
        display: inline;

    }



    < Bu mesaj bu kişi tarafından değiştirildi 11sa11 -- 19 Haziran 2019; 5:39:29 >







    • Yapay Zekanın Yanıtı

    Ul List Yan Yana Getirme

    Bir web sayfasındaki liste ögelerini (li) yan yana görüntülemek için ul li yan yana özelliği kullanabilirsin. Bu özellik, liste ögelerini yatay olarak sıralayarak daha düzenli ve okunaklı bir görünüm oluşturmana yardımcı olur.

    CSS ile Ul Li Yan Yana Getirme

    CSS (Basamaklı Stil Sayfaları) kullanarak liste ögelerini yan yana sıralayabilirsin. Aşağıdaki CSS kodunu kullanabilirsin:

    css ul li { display: inline-block; }

    Bu kod, liste ögelerine inline-block görünüm özelliğini uygular ve bunların yatay olarak sıralanmasını sağlar.

    HTML ile Listeyi Yan Yana Yazdırma

    Liste ögelerini HTML ile yan yana yazdırmak için aşağıdaki kodu kullanabilirsin:

    ```html

    • Öğe 1
    • Öğe 2
    • Öğe 3

    ```

    Bu kod, yatay olarak sıralanmış bir liste oluşturur.

    Li Yan Yana Listeleme

    li yan yana listeleme özelliği, liste ögelerini yatay olarak görüntülemene ve aralarına boşluk eklemene olanak tanır. Bu, liste ögelerini birbirinden ayırmaya ve okunabilirliği artırmaya yardımcı olur.

    Html Yan Yana Liste

    Bir html yan yana liste oluşturmak için, display: inline-block özelliğini ve liste ögeleri arasında boşluk oluşturmak için margin özelliğini kullanabilirsin.

    ```html

    • Öğe 1
    • Öğe 2
    • Öğe 3

    ```

    Bu kod, liste ögelerini yan yana görüntüler ve aralarına 10 piksel boşluk ekler.

    Css Listeyi Yan Yana Sıralama

    css listeyi yan yana sıralama özelliği, liste ögelerini yatay olarak sıralamaya ve gerektiğinde satır sonu eklemeye olanak tanır. Bu, uzun listeler oluştururken kullanışlıdır.

    css ul { display: flex; flex-wrap: wrap; }

    Bu kod, liste ögelerini yatay olarak sıralar ve listenin genişliği dolduğunda satır sonu ekler.

    Yapay Zekanın Yanıtını Genişlet
  • Display flex deneyin inline yerine.
  • HTML

    <div class="menu"> 
        <ul>
            <li class="liste"><a hiref="" yazıyo="">MAIN PAGE</a></li> 
            <li class="liste"><a hiref="" yazıyo="">WEB DESING</a></li> 
            <li class="liste"><a hiref="" yazıyo="">ANASAYFA</a></li> 
            <li class="liste"><a hiref="" yazıyo="">ANASAYFA</a></li> 
        </ul> 
    </div>


    STYLE

    li.liste {
        float: left;
        margin-left: 30px;
    }
  • Selamunaleyküm,
    .sag-alt .menu .li .a{
    display: inline;
    }
    yerine

    .sag-alt .menu li{
    display: inline;
    }

    yazmak işe yarayabilir.
  • herkese çok teşekkür ederim. sorun çözüldü ve işin temelini anladım divin içindeki tüm nesneleri sola dayayım padding verince araları açılmaya başlıyor ve sıralı gözüküyor. Tekrardan teşekkürler.
  • Daha da pekiştirmek için 5:50'den sonrasını izleyebilirsiniz.
    WebPanosu.NETyoutube
    CSS Uygulama Örneği
    https://youtu.be/AIVQZJ0eGSo?t=350



    < Bu mesaj bu kişi tarafından değiştirildi hyrgul -- 19 Haziran 2019; 20:8:50 >
  • Böyle şeylere ilginiz varsa önce display, position, margin, padding, float gibi özellikleri anlamanız gerekiyor. Float ile belirli elemanları yan yana dizebilirsiniz fakat sonrasında gelen eleman ile üst üste biner clear:both yapmazsanız. Float yerine display:inline-block özelliğini kullanırsanız aralarını açmak için padding ile oynamanıza gerek kalmaz.
    • 
Sayfa: 1

Benzer içerikler

- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.
Hizmet kalitesi için çerezleri kullanabiliriz. DH’ye girerek kullanım izni vermiş sayılırsınız.
Anladım Veri Politikamız