Poziome listy w CSS

Question

Jaka jest najlepsza praktyka do wykonywania poziomej listy w css? Teraz wiem, że to bardzo podstawowe pytanie, ale efekt, którego szukam, znajduje się na stronie takiej jak ta: http://www.frontend2011.com/.

Jeśli przewiniesz w dół do części wideo z listami 4 kolumn, zobaczysz dobry użytek z niej. Ale jeśli podam w CSS coś w stylu: float: left i margin-left: #px;, mój ostatni element listy zawsze spadnie do następnego wiersza, zanim nawet nie zbliży się do krawędzi modelu bloku div.

Słyszałem, że to z powodu modelu pudełkowego i granicy/dopełnienia/marginesu, ale jaki jest najlepszy sposób, aby przedostać się przez to? Chciałbym, aby listy dotykały prawej i lewej strony div, ale wydaje mi się to niemożliwe.

Answer 1

to może być dobre wykorzystanie box-sizing nieruchomości (obsługiwanym przez wszystkie przeglądarki IE8 zestawie): podano listę nieuporządkowaną (i zakładając lista-elementów wszystkie z tej samej wysokości) można przypisać ten styl do każdego <li>:

li { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

    float : left; 
    width : 25%; 
    padding : 15px; /* this will be applied internally, due to 
         box-sizing property */ 

} 

następnie, jeśli chcesz wymusić rozliczenia po każdym 4 ^THli, wystarczy dodać

li:nth-child(4n) { 
    clear : left; 
} 

inaczej, jeśli nie można być pewnym, że każdy <li> mają zawsze taką samą wysokość, a następnie używają pozycji inline-block zamiast float.

Answer 2

Chcesz najpierw wyzerować wartości margin i padding, aby nie było już wcięcia na liście. (Zauważ, że powinieneś zrobić to specyficznie poprzez klasę, tj. ul class="horizontal").

Następnie przepuść li i nadaj mu szerokość, która jest względna (w pikselach lub procentach) do szerokości ul. Rozliczenie dla margin między li s może być trudniejsze dla szerokości procentowych, jeśli jednak chcesz absolutną separację (na przykład 1px).

EDIT - Zapomniałem dodać dodanie ostatniej minuty klasy .horizontal do wszystkich selektorów.

A z pełną mocą skrzynki: http://jsfiddle.net/MYLGv/9/

<ul class="horizontal"> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
</ul> 

ul.horizontal, 
ul.horizontal li { 
    margin: 0; 
    padding: 0; 
} 
ul.horizontal { 
    list-style-type: none; 
    width: 400px; 
    background: whiteSmoke; 
    overflow: auto; 
    margin: 0 auto; 
} 
ul.horizontal li { 
    float: left; 
    width: 99px; 
    height: 99px; 
    margin: 0 1px 1px 0; 
    text-align: center; 
    background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=64&d=identicon&r=PG) center center no-repeat; 
    background-color: gray; 
    color: white; 
} 

http://jsfiddle.net/MYLGv/8/

Answer 3

Ten szczególny punkt w tej strony związanej wykorzystuje następujące CSS, aby te poziome list.

.col{ 
    width: 24%; 
    margin: 0 0 2% 1%; 
    float: left; 
} 

Answer 4

Istnieje kilka sposobów wyświetlania listy w poziomie.

1) Można ustawić li: s do display: inline, elementy inline szerokość, wysokość i wyściółka nie może być stylizowany te same elementy blokowe sposób można więc jeśli chcesz tła lub obramowania należy używać:

2) display: inline-block wyświetla li: s w jednej linii, zachowując cechy elementu blokowego, inline-block działa w większości przeglądarek, ale może być konieczne użycie *display: inline dla IE7 i poniżej. Elementy o rozmiarze linii i rozmiarze czcionek mają wpływ na elementy inline i inline-block, przez co możesz uzyskać niechciane przerwy między elementami menu, możesz łatwo rozwiązać ten problem, ustawiając wartość font-size na 0 na ul i ustawiając ją ponownie na wartość normalną w li: s .

3) Po trzecie można użyć display: block wraz z float: left, problem z pływakiem jest to, że nie mogą być skupione jak display: inline-block łatwo można z text-align: centeri trzeba pamiętać, aby usunąć elementu nadrzędnego (overflow: hidden na ul jest wystarczy)

4) Jeśli potrzebujesz listy span całą szerokość jego rodzica, najłatwiejszą rzeczą jaką możesz zrobić, to użyć display: table; width: 100% na ul i display: table-cell na li: s, dzięki czemu ul zachowywać się jak table

Answer 5

Zasadniczo niemożliwe jest uzyskanie tego poprawnie z czystym CSS, a nie ze strukturą tabel/javascript, patrz także here.

Użyłem rozwiązania jQuery, które również zostało tam zasugerowane i działa idealnie. Znajdź link here.

A oto kod:

var currentTallest = 0, 
    currentRowStart = 0, 
    rowDivs = new Array(), 
    $el, 
    topPosition = 0; 

$('.blocks').each(function() { 

    $el = $(this); 
    topPosition = $el.position().top; 

    if (currentRowStart != topPosition) { 

    // we just came to a new row. Set all the heights on the completed row 
    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
     rowDivs[currentDiv].height(currentTallest); 
    } 

    // set the variables for the new row 
    rowDivs.length = 0; // empty the array 
    currentRowStart = topPosition; 
    currentTallest = $el.height(); 
    rowDivs.push($el); 

    } else { 

    // another div on the current row. Add it to the list and check if it's taller 
    rowDivs.push($el); 
    currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); 

    } 

    // do the last row 
    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
    rowDivs[currentDiv].height(currentTallest); 
    } 

});​