Я предполагаю, что нет другого примера, что ваша проблема в том, что вы хотите, чтобы быть горизонтальным, а не вертикальным (вы сказать, что они все на левой стороне). Если это не проблема, этот ответ не будет применяться.
Вы, вероятно, хотите что-то в 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/
Css Please !!!!! –
Вы используете CSS для форматирования своей страницы? вы также можете показать свой код CSS? –
Посмотрите здесь, я думаю, что это полностью отвечает на ваш вопрос (поскольку это почти тот же вопрос): http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu –