CSS-позиционирование - неупорядоченный список - PullRequest
Новая
       10

CSS-позиционирование - неупорядоченный список

2 голосов
/ 30 октября 2010

Я хочу расположить неупорядоченный список элементов в левой части заголовка меню (по горизонтали, а не по вертикали). Например, где вы видите Home, HTML и т. Д .:

alt text

Как мне добиться этого эффекта с помощью CSS?

Ответы [ 2 ]

3 голосов
/ 30 октября 2010

поплавки 

ul
{
    margin: 0;
    list-style-type: none;
}
ul li
{
    margin: 0;
    list-style-type: none;
    float: left;
}
ul li a
{
    display: block;
}

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">...</a></li>
</ul>

Чтобы получить списки, подобные имеющимся на вашем изображении, вам нужно иметь два набора UL, а затем применить float: left; к левому и float: right; справа.

С помощью поплавков вы должны очистить их, чтобы позже не «сломать» ваш дизайн. Вы можете сделать это, добавив <br style="clear: both;" /> под списками. Вы также можете добавить этот стиль к следующему div.

2 голосов
/ 30 октября 2010 
.menu{
text-align:left;
}
.menu ul{
margin:0px;
padding:0px;
}
.menu ul li{
display:inline;
margin:0px;
padding:0px 10px 0px 10px;
text-align:center;
}


<div class="menu">
   <ul>
       <li><a href="#">Menu1</a></li>
       <li><a href="#">Menu2</a></li>
       <li><a href="#">Menu3</a></li>
   </ul>
</div>
...