CSS! Горизонтальное меню изменяемого размера ul li, как его разложить по всей ширине дисплея? - PullRequest
Новая
       3

CSS! Горизонтальное меню изменяемого размера ul li, как его разложить по всей ширине дисплея?

2 голосов
/ 20 января 2012

размер сайта можно изменить, поэтому я не могу использовать px, и иногда возникают проблемы с последними элементами, они падают при уменьшении длины окна, как этого избежать? давайте посмотрим мою единственную страницу: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>li menu</title>
</head>

<body>
<style>
div {
    width: 100%;
    height: 3%;
    background: red;
    opacity: 0.7;
}
ul {
    width:100%;
    list-style:none;
    padding: 0;
    margin: 0;
}

ul li {
 background-color:yellow;
 display: inline;
 text-align: center;
 width:30%;
}
</style>
<div>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
    </ul>
</div>

</body>
</html>

Ответы [ 2 ]

1 голос
/ 20 января 2012

Вы можете добавить пробел: nowrap;на ваш элемент UL http://jsfiddle.net/jvrCH/ Но в этом случае элементы меню исчезнут с экрана, если не будет достаточно места.

0 голосов
/ 21 января 2012

Если вам не нужна идеальная поддержка старых навигаторов, вы можете установить min-width для вашего содержащего div, например: 

div {
    /* current css */
    min-width:960px; /* which is the current minimum width for designing website for desktops */
}

И вы можете сделать то же самое с помощью кнопок (ииспользуйте display:block и float:left, чтобы margin-top/bottom, padding-top/bottom и height работали): 

ul li {
    /* current css */
    display:block; /* default display for list elements, could be omitted */
    float:left;
    width:30%;
    max-width:125px;
    min-width:50px;
}

И, наконец, исправьте проблему с плавающей точкой (родительский элемент сворачивается, если все дочерние элементы находятся в float): 

ul {
    /* current css */
    overflow:hidden
}

Вместо использования уловки overflow:hidden, вы можете положиться на решение clearfix

...