2013-04-29 3 views
0

Я делаю веб-сайт деловой компании, в верхней части страницы находится панель меню. Теперь эта строка содержит четыре тега li (ниже кода), эти лики находятся слева от страницы. Я хочу, чтобы он распределялся ровно горизонтально. Помогите!неупорядоченный список не находится в центре

<div id="wrapper-menu"> 
<div id="menu"> 
    <ul> 
     <li><a href="">home</a></li> 
    <li><a href="">about us</a></li> 
    <li><a href="">news</a></li> 
    <li><a href="">contact us</a></li> 
    <li><a href="">links</a></li> 
    </ul> 
</div> 
    </div> 
+0

Css Please !!!!! –

+0

Вы используете CSS для форматирования своей страницы? вы также можете показать свой код CSS? –

+0

Посмотрите здесь, я думаю, что это полностью отвечает на ваш вопрос (поскольку это почти тот же вопрос): http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu –

ответ

0

Я предполагаю, что нет другого примера, что ваша проблема в том, что вы хотите, чтобы быть горизонтальным, а не вертикальным (вы сказать, что они все на левой стороне). Если это не проблема, этот ответ не будет применяться.

Вы, вероятно, хотите что-то в CSS вдоль линий:

li {display: inline-block;} 

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

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

http://jsfiddle.net/NqgZ4/ для примера jsfiddle.

В качестве дополнения к вашему комментарию, чтобы они были распространены, самым простым способом является применение к ним ширины.

li 
{ 
    display: inline-block; 
    width: 19%; 
} 

Обратите внимание, что я использую 19% вместо 20%, чтобы избежать округления проблем, которые могут привести к ширине превышать пиксели (например, если ширина доступна 999 точек, то 20% будут делать каждый из них 200 пикселей, которые тогда будет слишком много).

Если у вас есть динамическое количество элементов меню, то это немного сложнее, и я бы начал думать о немного скрипта, чтобы уравнять их (установив ширину динамически), хотя может существовать чистый метод CSS, который будет работать с переменным количеством элементов.

Обновлено скрипку: http://jsfiddle.net/NqgZ4/1/

+0

вот полные css и html-разметки http://jsfiddle.net/NqgZ4/. Вопрос состоит в том, что все четыре тега li должны быть равномерно распределены на wrappermenu. – user1907680

+0

Добавлено обновление, чтобы охватить их больше. Надеюсь, это то, что вам нужно. – Chris

0

Вам нужно сделать литиево элементы строкового блока, и не забудьте применить текст выравнивать к ул:

li { 
    display: inline-block; 
} 
ul { 
    text-align: center; 
} 

пример здесь:

http://jsfiddle.net/evmDv/

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