выровнять ul внутри li в одну строку - PullRequest
Новая
       4

выровнять ul внутри li в одну строку

2 голосов
/ 20 августа 2011

Я пытаюсь сделать какую-то работу li и не могу понять следующее: 1) например: 

<ul>
<li> very long element</li>
<li> short </li>
</ul>

возможно ли с помощью CSS сделать второй элемент li равным ширинечтобы текст внутри него?Очевидно, его ширина будет равна ширине первого элемента

2) Могу ли я расположить свои li и ul следующим образом (я пишу это без форматирования, чтобы оно отображало так, как мне бы хотелось, чтобы это было)):

| ul |

| li | top1 | ul || Li | sub1 | / li || Li | sub2 | / li || / ul |

| li | top2 | ul || Li | sub3 | / li || Li | sub4 | / li || / ul |

| / ul |

Другими словами, есть ли CSS, который бы выровнялся внутри определенного li, и он находится в одной строке с ним?

С уважениемДенис.

Ответы [ 2 ]

3 голосов
/ 20 августа 2011

Я думаю, что это ответит на оба вопроса. Вот самый простой способ, которым я могу достичь этого. Список останется в одной строке, а разметка все еще семантически верна. Я добавил отступы, чтобы элементы были равномерно распределены.

HTML 

<ul>
    <li>List 1:1</li>
    <li>List 1:2</li>
    <li>List 1:3</li>
    <li>
        <ul>
            <li>List 2:1</li>
            <li>List 2:2</li>
            <li>List 2:3</li>
        </ul>
    </li>
    <li>List 3:1</li>
    <li>List 3:2</li>
    <li>List 3:3</li>
</ul>

CSS 

ul { list-style-type:none; margin:0; padding:0; }
li { display:inline; float:left; padding:0 10px; margin:0; }
3 голосов
/ 20 августа 2011

Возможно, вы ищете что-то подобное, я не уверен:

HTML 

<ul>
    <li>item one</li>
    <li>item two two two two two</li>
    <li>item three three</li>
</ul>

CSS 

ul li { float: left; clear: left; margin-bottom: 10px; background: #ccc }

Похоже

http://jsfiddle.net/BWZfr/

И для вашего второго вопроса ... может быть, вы имеете в виду что-то вроде http://jsfiddle.net/BWZfr/1/?

...