Jak ukształtować moją nieuporządkowaną listę jak stół?

Question

mam tylko jeden <UL> i mocy, że mamy grupę <LI>

<ul> 
    <li>1<li> 
    <li>2<li> 

    <li>3</li> 
    <li>4<li> 

</ul> 

teraz chciałem pokazać im jak stół, proszę mi pomóc z CSS, w jaki sposób możemy pokazać jak stół do powyżej UL/li w poniżej formie tabeli 2 LI ustawione w jednej TR (dwa TD) i tak dalej ....

Answer 1

Cóż, tutaj jest jednym z możliwych rozwiązań:

ul { 
    width: 450px;   /* change it to whatever you like */ 
    position: relative; 

    /* these should be probably already set up by `reset.css` */ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

ul:before, ul:after { 
    text-align: center; 
    display: block; 
    border: 1px solid black; 
    border-bottom: 0; 
    width: 48%; 
} 

ul:before { 
    content: 'col1'; 
    border-right: 0;  
} 

ul:after { 
    content: 'col2'; 
    position: absolute; 
    top: 0; 
    left: 48%; 
    margin-left: 1px;  
} 

li { 
    text-align: right; 
    width: 48%; 
    float: left; 
    border: 1px solid black; 
    margin-bottom: -1px; 
} 

li:nth-child(even) { 
    margin-left: -1px; 
} 

Działa (JSFiddle; przetestowane w Chrome, Firefox i Opera; nth-child(even) selektor oczywiście nie w IE8, więc trzeba naśladować go z klasy lub innych środków; ale poza tym nadal jest solidny), ale przyznaję, że czuję się z tego powodu winny.)

P.S. Jeśli chcesz dodać dopełnienie do zawartości „komórka”, nie zapomnij, aby zmienić ich szerokości, jak również, jak here:

li { 
    width: 47%; 
    padding-right: 1%; 
} 

Answer 2

nie można konwertować jedną listę (zawierająca więcej niż 2 pozycji) do 2 kolumn poprzez właściwości display: table ponieważ potrzebujesz jakiegoś elementu, który będzie działał jak wiersz tabeli. Bez elementu działającego jako wiersz tabeli wszystkie sąsiednie elementy ustawione na display: table-cell będą zawarte w anonimowym elemencie wiersza tabeli, którego nie można w żaden sposób modyfikować ani stylizować.

jedyną opcją jest albo zmienić znaczników (by użyć tabel i list list) lub zastosować inne podejście do swojego CSS: albo pływa/inline-block na li s lub za pomocą właściwości columns na ul.

Answer 3

To bardzo późno odpowiedź, ale myślę, że jest to wspólny temat. Here's a codepen I made.

Oczywiście to tylko punkt wyjścia. Zawiera również przykład dodawania stylów takich jak bg czy granice. Jeśli "komórki" zawierają jakąś dowolną treść, na przykład musisz dostosować wymiary. Używam tego rodzaju kodu dla miniaturek galerii, na przykład, gdy nie trzeba się martwić o granicach lub BGS i to kod dość elementarny (przykładem jest dla tabeli 2x3, patrz codepen):

ul{ 
    list-style:none; 
} 

ul li{ 
    float:left; 
    padding:10px; 
    border-bottom:1px solid #000; 
    border-right:1px solid #000; 
} 

ul li:nth-child(3n){ 
    background-color:#888; 
} 

ul li:nth-child(3n+1){ 
    clear:both; 
    border-left:1px solid #000; 
    background-color:#ccc; 
} 

ul li:nth-child(-n+3){ 
    border-top:1px solid #000; 
} 

Mam nadzieję, że to pomoże.