CSS с Aligned LI в пределах UL

Я пытаюсь иметь некоторые LI внутри выравнивания UL влево, вправо и в центре внутри страницы. В моей жизни я не могу понять, как сохранить что-то «центрированное» на той же линии, что и левый и правый выровненный LI.CSS с Aligned LI в пределах UL

ul { 
    margin:1em 0; 
    padding:0 
} 

ul li{ 
    display:inline-block; 
    white-space:nowrap; 
    margin:5px 
} 

ul li.left{ 
    float: left; 
    text-align:left; 
} 

ul li.center{ 
    float:left; 
    text-align: center; 
} 

ul li.right{ 
    float: right; 
    text-align:right; 
}

<ul> 
    <li class="left">left</li> 
    <li class="center">center</li> 
    <li class="right">right</li> 
</ul> 

<ul> 
    <li class="left">left</li> 
    <li class="right">right</li> 
</ul> 

<ul> 
    <li class="left">left</li> 
</ul>

Может кто-нибудь помочь? Кстати, я стараюсь избегать DIV.

Спасибо!

источник

2011-01-14 Alex

Если вы хотите, чтобы каждый делить пространство экрана одинаково, вы можете сделать это:

<style> 
    .split { width: 33%; float: left; } 
</style> 

<ul> 
    <li class="split">left</li> 
    <li class="split">center</li> 
    <li class="split">right</li> 
</ul>

Вы хотите переместить ваши стили во внешнюю таблицу стилей, хотя.

источник

2011-01-14 21:47:52 mitch

Я хочу, чтобы право было выровнено как правое, левое и левое, и центр ... вы догадались. Даже промежуток также важен, но не требуется, потому что «размер» содержимого может варьироваться от каждого столбца. – Alex

Кстати, у меня есть свои стили на внешнем листе, я просто перешел на главную страницу для тестирования. – Alex

О, я вижу, что вы хотите сделать. поэтому вы хотите иметь 3 элемента слева, 2 в центре и 4 с правой стороны. число в каждой стороне может измениться, правильно? если да, то почему вы направляетесь от дивизий? – mitch

Вы можете определенно сделать это, если плавать только одно.

ul li { float:right; }

Если вы плаваете их все влево, то вы получите (с тремя элементами LI) правый, центральный, и ушел.

<ul><li>right</li><li>center</li><li>left</li></ul>

Хороший способ думать об этом думает о том, что вы хотите, чтобы это произошло с каждого отдельного элемента LI: вы хотите, чтобы каждый один, чтобы быть сдвинут вправо от другого. Это наиболее распространенный метод создания горизонтальной навигации со структурой списка.

источник

2011-01-14 21:43:04 h4xnoodle

Элементы li будут такими же широкими, как текст, который он содержит, поскольку вы плаваете и не указываете ширину. Вы хотите, чтобы ваш центральный элемент был жидким? Если я не ошибаюсь, похоже, вы идете на жидкую трехколоночную раскладку? Есть много примеров из них в сети, если это то, что вы собираетесь делать.

источник

2011-01-14 21:47:29 Calvin

Ну, я пытаюсь сделать отчет. Версия для печати будет иметь одну/две/три строки на «группу ul», но на экране это будет набор ul. Я стараюсь, чтобы все было равномерно распределено. – Alex

Благодаря mitch и всем остальным, это решение, которое я придумал и работает для меня.

<style> 
ul { 
    margin: 1em 0; 
    padding: 0; 
    list-style-type:none; 
} 

li.three { 
    width: 33%; 
} 

li.two { 
    width: 50%; 
} 

li.one { 
    width: 100%;  
} 

li.left { 
    float: left; 
    text-align: left; 
} 

li.center { 
    width: 33%; 
    float: left; 
    text-align: center; 
} 

li.right { 
    width: 33%; 
    float: right; 
    text-align: right; 
} 


</style>

<ul> 
    <li class="three left">left</li> 
    <li class="three center">center</li> 
    <li class="three right">right</li> 
</ul> 


<ul> 
    <li class="two left">left</li> 
    <li class="two right">right</li> 
</ul> 

<ul> 
    <li class="one left">left</li> 
</ul>

источник

2011-01-14 22:16:57 Alex

CSS с Aligned LI в пределах UL

ответ

Смежные вопросы