CSS устанавливает ширину для элементов в центрированном горизонтальном списке - PullRequest
Новая
       32

CSS устанавливает ширину для элементов в центрированном горизонтальном списке

2 голосов
/ 19 июля 2011

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

У меня есть два дополнительных требования - мне нужно указать ширину некоторых элементов , и мне нужно иметь возможность центрировать список на странице . Я могу сделать одно или другое, но не могу понять, как добиться того и другого.

См. Ниже в качестве примера / отправной точки: 

<ul>
    <li class="previous"><a>previous</a></li>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
    <li class="next"><a>next</a></li>
</ul>

li
{
    display: inline;
    list-style-type: none;
    margin: 5px;
}

a
{
    padding: 2px 10px 2px 10px;
    border: solid 1px #aaa;
    color: #131313;
    text-decoration: none;
}

jsFiddle здесь .

Я бы хотел, чтобы элементы previous и next имели одинаковую ширину, и я бы хотел, чтобы все это было в центре страницы. Обратите внимание, что я не могу знать ширину полного списка, поэтому использование контейнера с margin: 0 auto; не сработает.

Должен быть кросс-браузерным и поддерживать IE6.

1 Ответ

2 голосов
/ 19 июля 2011

См .: http://jsbin.com/azoquv

  • text-align: center на ul центрирует все это.
  • display: inline-block и хак для IE6 / 7 позволяет вам установить width на li.

Проверено в IE6 / 7 + Chrome. Он будет работать только во всех современных браузерах. 

ul {
    text-align: center;
    margin: 0;
    padding: 0
}
li
{
    display: inline-block;
    *display: inline;
    zoom: 1;

    list-style-type: none;
    margin: 5px;
}

a
{
    display: block;
    padding: 2px 10px 2px 10px;
    border: solid 1px #aaa;
    color: #131313;
    text-decoration: none;
}
...