как выровнять горизонтальный список внутри div?

Я пытаюсь центрировать мой горизонтальный < ul> внутри a < div> (желтая полоса в моем примере). надпись ниже. Я знаю, что если бы < li> не плавали, я мог бы сделать это, установив левый и правый поля на < ul> на «auto», но я, похоже, не нашел способ избавиться от «float», потому что мне нужен мой < li> быть блочными элементами, чтобы я мог их размер. пожалуйста помоги! Спасибо КОНСТАНТИНкак выровнять горизонтальный список внутри div?


<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     .container 
     { 
      background-color: yellow; 
     } 
     .container li 
     { 
      border: solid 1px grey; 
      display: block; 
      float: left; 
      height: 100px; 
      line-height: 100px; 
      list-style-type: none; 
      margin: 5px; 
      text-align: center; 
      width: 100px; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <ul> 
      <li><a href="#">x</a></li> 
      <li><div>y</div></li> 
     </ul> 
     <div style="clear: both;"> 
     </div> 
    </div> 
</body> 
</html>

Demo размещен от имени OP по адресу: jsbin.

источник

2010-08-19 akonsu

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

.container ul{ 
    width:400px; 
    margin:0px auto 
}

источник

2010-08-19 17:38:25 Zaahid

спасибо. это работает. я бы предпочел не использовать фиксированную ширину, потому что вообще мой < ul> автогенерируется и может содержать переменное количество элементов. – akonsu

Не знаете, как ответить на ваш вопрос, потому что я не могу даже увидеть желтую полосу в FF 3.6.8

но посмотрите на эту http://www.cssplay.co.uk/boxes/ - есть много варианты, и это может помочь вам.

источник

2010-08-19 17:46:00 Ken

спасибо. Я отредактировал свою разметку, теперь вы сможете ее увидеть. – akonsu

Попробуйте это работает на Firefox и хром

<html> 
<head> 
<title></title> 
<style type="text/css"> 
    .container 
    { 
     background-color: yellow; 
     text-align: center; 
    } 
    .container ul 
    { 
     display: inline-table; 
     text-align: center; 
    } 
    .container li 
    { 
     border: solid 1px grey; 
     display: block; 
     float: left; 
     height: 100px; 
     line-height: 100px; 
     list-style-type: none; 
     margin: 5px; 
     text-align: center; 
     width: 100px; 
    } 
</style> 
</head> 
<body> 
<div class="container"> 
    <ul> 
     <li><a href="#">x</a></li> 
     <li> 
      <div> 
       y</div> 
     </li> 
    </ul> 
    <div style="clear: both;"> 
    </div> 
</div> 
</body> 
</html>

источник

2010-08-20 06:03:52

как выровнять горизонтальный список внутри div?

ответ

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