Как горизонтально центрировать неупорядоченный список неизвестной ширины?

Обычно существует набор ссылок в нижнем колонтитуле, представленном в списке, например:

<div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Я хочу, чтобы все в нижнем колонтитуле div # располагались по горизонтали. Если бы это был абзац, вы бы просто сказали: p { text-align: center; }. Или, если бы я знал ширину <ul>, я мог просто сказать #footer ul { width: 400px; margin: 0 auto; }.

Но как вы центрируете неупорядоченные элементы списка без установки фиксированной ширины на <ul>?

ИЗМЕНИТЬ: пояснение - элементы списка должны быть рядом друг с другом, а не ниже.

Ответы

Ответ 1

Решение, если ваши элементы списка могут быть display: inline, довольно просто:

#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }

Однако много раз вы должны использовать display:block на своих <li> s. Следующий CSS будет работать в этом случае:

#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }

Ответ 2

Используйте приведенную ниже css для решения проблемы.

#footer{ text-align:center; height:58px;}
#footer ul {  font-size:11px;}
#footer ul li {display:inline-block;}

Примечание. Не используйте float:left в li. это заставит ваш ли выравнивать влево.

Ответ 3

Еще одно решение:

#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }

Тогда ul не переходит к следующей строке в случае масштабирования текста.

Ответ 4

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

Home
About
Contact

или

Home | About | Contact

Первое, что вы можете сделать с помощью:

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }

Второе может быть выполнено следующим образом:

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }

Ответ 5

Попробуйте обернуть список в div и дать этому div свойство inline вместо вашего списка.

Ответ 6

Ответ philfreo велик, он отлично работает (кросс-браузер, с IE 7+). Просто добавьте мой exp для тега привязки внутри li.

#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */

#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }