Горизонтальное меню CSS: дисплей: встроенный И блок?Сделать ссылку на всю ЛИ?

Question

Обычно, чтобы заполнить ссылку целиком li, я использую display: block;.Но с горизонтальным меню мне нужно настроить отображение: inline;так идет в одну строку.Я пробовал display:inline-block;, но это не помогает.Я видел горизонтальные меню, которые достигают этого, но я не могу узнать, как из их источника.Спасибо.

Answer 1

Примените height и width к родительским li элементам, а затем:

a {
display: inline-block;
height: 100%;
width: 100%;
}

Демонстрация JS Fiddle .

Answer 2

ul {
    width: 100%;
    overflow: hidden;
}

li {
    float: left;
    list-style: none;
}

li a {
    float: left;
    padding: 5px;
    background: red;
    color: white;
}

См .: http://pastehtml.com/view/1cdzwnz.html

Answer 3

Это должно сделать это:

ul.menu>li {
    display: inline-block;
    width: 40px;
    border: 1px black solid;
}
ul.menu>li>a {
    display: block;
}

Answer 4

Это ваша установка:

<ul id="nav">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
</ul>

Ваша ссылка не будет заполнять <li>, но <li> все равно будет элементом блока.Сделайте <li> display: inline:

ul#nav li {display: inline;}

Или используйте значение li и задайте ему ширину:

ul#nav {overflow: hidden;}
ul#nav li {float: left; width: 50%;}