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

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

2 голосов
/ 19 августа 2010

Я пытаюсь центрировать мою горизонтальную

  • не было плавающим, то я мог бы сделать это, установив левые и правые поля на
    • быть блок-элементами, чтобы я мог их размер.пожалуйста помоги!спасибо Константин 
      
<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>

      Демоверсия размещена от имени ОП по адресу: jsbin .

Ответы [ 3 ]

5 голосов
/ 19 августа 2010

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

.container ul{
    width:400px;
    margin:0px auto
}
1 голос
/ 20 августа 2010

Попробуйте, работает на Firefox и Chrome 

<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>
0 голосов
/ 19 августа 2010

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...