Сделайте <li> значение ширины <ul>, используя CSS

Я пытаюсь установить <li> в соответствии с шириной <ul>, но даже с width:auto он вообще не работает, и я не знаю, почему. Я пытался использовать display:inline-block, но это то же самое. Я не знаю, сколько вкладок у меня будет, поэтому я не использую процент напрямую.

Я хотел бы отобразить список inline, когда я показываю страницу на рабочем столе и отображаю один li на строку, когда я на смартфоне (со средствами массовой информации).

У меня есть это:

<ul id='menu'>
    <li class="button"><a class='current' href='http://'>Home</a></li>
    <li class="button"><a href='http://'>Products</a></li>
    <li class="button"><a href='http://'>Support</a></li>
    <li class="button"><a href='http://'>Contact</a></li>
    <li class="button"><a href='http://'>Contact</a></li>
</ul>

и мой CSS выглядит так:

ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
/*border-bottom:1px solid #000000;
border-top:1px solid #000000;*/
}

li.button {
background:transparent url(../images/nav_bg.png) repeat-x top left;
height:30px;
width:auto;
}



ul#menu li
{
display:inline-block;
margin:0;
padding:0;
width:auto;
}

ul#menu li a
{
display:inline-block;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
width:auto;
}

ul#menu li a:hover
{   
color:#FFFFFF;
height:22px;
background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;       
}


ul#menu li a.current
{
display:inline-block;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;  
margin:0;
}

Ответы

Ответ 1

Я нашел этот способ работы с однострочной полной шириной ul, где число элементов undefined li должно быть равномерно распределено:

ul {
  width: 100%;
  display: table;
  table-layout: fixed; /* optional */
}

ul li {
  display: table-cell;
  width: auto;
  text-align: center;
}

В принципе, он эмулирует таблицу. Работает в Gecko, Webkit, IE8 +. Для IE7 и ниже вы должны использовать хакерство inline-block:)

JSFiddle

Ответ 2

Так как количество слов может меняться, я могу только подумать о том, чтобы выполнить это с помощью javascript/jquery, как вы предложили. Просто разделите 100 на # li и установите ширину на каждом из них.

var width = Math.floor(100 / $("ul#menu li").size());
$("ul#menu li").css('width', width + "%");

Вам, вероятно, придется играть с шириной в зависимости от дополнения, а что нет.

В качестве примечания, если вы еще этого не сделали, я рекомендую получить инструмент, например firebug, который позволит вам редактировать css и выполнить js на лету. Это бесконечно полезно для тонкой настройки.

Ответ 3

Если вы хотите заполнить ширину <ul> пятью <li> s, вам нужно будет предоставить те <li> ширину по 20% каждая.
Обратите внимание, что вам нужно изменить некоторые другие детали CSS, если вы хотите сделать эту работу; например с помощью display:inline-block вы создаете пробелы между подсчетами <li>, поэтому общая ширина содержимого <ul> будет более 100%. Я предлагаю удалить display:inline-block и дать им float:left.

Изменить: Или вы хотите, чтобы они распределялись пропорционально в соответствии с их содержимым? Это будет другой вызов.

Ответ 4

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            body{
                margin:0 auto;
            }
            .main{
                width:650px;
                border:1px solid red;
                padding:5px;
            }
            ul {
            padding:0;
            margin:0;
            width: 100%;
            border-bottom: 0;
            }
            li{
                display: table-cell;
                width: 1%;
                float: none;
                border:1px solid green;
                margin:2px;
                padding:10px;
                text-align:center;
            }
        </style>
    </head>
    <body>
       <div class="main">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
       </div>
    </body>
</html>

Ответ 5

попробуйте ниже css:

style.css (line 87)

ul#menu li {
    float: left;
    margin: 0;
    padding: 6px 0;
    width: 11.1%;
}

style.css (line 113) 

ul#menu li a.current {
    background: url("images/nav_bg.png") no-repeat scroll 0 -30px transparent;
    height: 22px;
    margin: 0;
}

style.css (line 95)

ul#menu li a {
    color: #999999;

    font-weight: bold;
    padding: 8px 20px 0;
    text-decoration: none;
    width: auto;
}

см. снимок экрана:

enter image description here