Soru CSS Yatay liste öğeleri


Bu yüzden, tasarladığım yeni bir web sitesinde kullanmak için yatay bir liste oluşturmaya çalıştım. Şimdiye kadar çevrimiçi olarak bulduğum bir dizi öneriyi, “float” ı sola çevirmek gibi bir girişimde bulunmaya çalıştım - fakat bunların hiçbiri sorunu düzeltmek için işe yaramadı.

    ul#menuItems {
      background: none;
      height: 50px;
      width: 100px;
      margin: 0;
      padding: 0;
    }
    ul#menuItems li {
      display: inline;
      list-style: none;
      margin-left: auto;
      margin-right: auto;
      top: 0px;
      height: 50px;
    }
    ul#menuItems li a {
      font-family: Arial, Helvetica, sans-serif;
      text-decoration: none;
      font-weight: bolder;
      color: #000;
      height: 50px;
      width: auto;
      display: block;
      text-align: center;
      line-height: 50px;
    }
<ul id="menuItems">
  <li>
    <a href="index.php">Home</a>
  </li>
  <li>
    <a href="index.php">DJ Profiles</a>
  </li>
</ul>

Şu anda bu sorunun neden olduğu konusunda emin değilim, nasıl giderim ve nasıl çözerim?


37
2018-03-29 20:09


Menşei


kullanım float özellik - Ron
görmek css.maxdesign.com.au/listutorial/index.htm - George Birbilis


Cevaplar:


Güncellenmiş Cevap

Bir çok insanın bu cevabı kullandığını fark ettim, bu yüzden biraz güncellemeye karar verdim. Orijinal cevabı görmek istiyorsanız aşağıya bakın. Yeni cevap, listenize nasıl bir stil ekleyebileceğinizi gösterir.

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
    zoom:1;
    *display:inline;
    /* this fix is needed for IE7- */
}
<ul>
    <li> <a href="#">some item</a>

    </li>
    <li> <a href="#">another item</a>

    </li>
</ul>


62
2018-03-29 20:11



Cevaplanmış cevap çünkü sorunu çözüyor, ancak yüzer topal ve yaşlı! IE7 kullanmıyorsanız, u kullanmalısınız display:inline-block; - PlantTheIdea
@LifeInTheGrey Bu harika bir nokta - bunu ikinci seçenek olarak ekleyeceğim - İpuçları için teşekkür ederim - What have you tried
Merak etme, cevabınızı IE7 ve aşağıdaki düzeltmeleri içerecek şekilde düzenledik: uncorkedstudios.com/2011/12/12/... - PlantTheIdea
Tarayıcı penceresi yeniden boyutlandırıldığında liste çöker - bunu önlemek için bir yol var mı? İdeal olarak, liste ne olursa olsun yatay düzenini korumalıdır. Bu nasıl başarılabilir? - zero_cool
@Jackson_Sandland Ayarla min-width üzerinde ul öğe: #my-list{ min-width: 780px; } - What have you tried


Bu keman nasıl olduğunu gösterir

http://jsfiddle.net/9th7X/

ul, li {
    display:inline
}

Listelerdeki büyük referanslar ve burada css:

http://alistapart.com/article/taminglists/


6
2018-03-29 20:14





Daha iyi bir yol kullanmaktır inline-blockçünkü kullanmanıza gerek yok clear:both Artık listenin sonunda.

Bunu dene:

<ul>
    <li>
        <a href="#">some item</a>
    </li>
    <li>
        <a href="#">another item</a>
    </li>
</ul>

CSS:

ul > li{
    display:inline-block;
}

Şuna bir bakın: http://jsfiddle.net/shahverdy/4N6Ap/


4
2018-03-29 20:14





Yüzer elemanlardan kaçınmak için satır içi blokları da kullanabilirsiniz.

<ul>
    <li>
        <a href="#">some item</a>
    </li>
    <li>
        <a href="#">another item</a>
   </li>
</ul>

ve sonra stil gibi:

li{
    /* with fix for IE */
    display:inline;
    display:inline-block;
    zoom:1;
    /*
    additional styles to make it look nice
    */
 }

Bu şekilde, herhangi bir şeyi yüzdürmek zorunda kalmazsınız.


1
2018-03-29 20:16



Bunu denedim, ancak hala yatay olarak gösterilmiyorlar - www.s4nr.com/SpecialTesting - Christopher Orchard
@LoadData menünüzün 100px genişliğindedir ve li'siniz 128px birleşik genişliğe sahiptir, böylece ikinci öğe bir sonraki satıra kadar düşecektir. - Jamie


İşte listenin dinamik yeniden boyutlandırılmasıyla ilgili daha fazla öneriyle birlikte çalışan bir örnek bulabilirsiniz.

Ekranı kullandım: satır içi blok ve yüzde doldurma, böylece ana liste dinamik olarak boyutu değiştirebilir:

display:inline-block;
padding:10px 1%;
width: 30%

artı ilk ve son öğelerin dolgularını kaldırmak için iki kural daha.

ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}

0
2018-03-29 20:28