0

Здравствуйте, все работает хорошо, за исключением того, что при увеличении в браузере масштаба, пункты меню переходят на новую строку, а хотелось бы, чтобы все было на одной.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" src="fixie.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title></title>
    <style type="text/css">
        #nav,
        #nav ul {
            background-color: #444;
            font: 11px/28px Verdana, Arial, Helvetica, sans-serif;
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        #nav {
            border: 1px solid #000;
            height: 28px;
            width: 100%;
        }
        #nav a {
            border-right: 1px solid #000;
            color: #fff;
            display: block;
            padding: 0px 20px;
            text-align: center;
            text-decoration: none;
            width: 70px;
        }
        #nav li {
            float: left;
            position: relative;
        }
        #nav li:hover,
        #nav li.jshover {
            background-color: #333;
        }
        #nav a:hover {
            background-color: #ccc;
            color: #000;
        }
        #nav ul {
            border: 1px solid #000;
            border-bottom: 0px;
            border-top: 0px;
            display: none;
            left: 0px;
            position: absolute;
            top: 28px;
            width: 108px;
        }
        #nav ul a {
            border: 1px;
            border-bottom: 1px solid #000;
            width: 68px;
        }
        #nav li:hover ul,
        #nav li.jshover ul {
            display: block;
        }
    </style>
</head>
<body>
    <ul id="nav">
        <li><a href="#">Афиша</a></li>
        <li><a href="#">Меню</a>
            <ul>
                <li><a href="#">Европейская кухня</a></li>
                <li><a href="#">Японская кухня</a></li>
                <li><a href="#">Корейская кухня</a></li>
            </ul>
        </li>
        <li><a href="#">Фото</a>
        <li><a href="#">Музыка</a></li>
        <li><a href="#">Правила</a></li>
        <li><a href="#">Контакты</a></li>
        <li><a href="#">Информация</a></li>
    </ul>
</body>
</html>

2 ответа 2

1

Тогда таблицей.

Если религия не велит использовать тэг <table>, то применяйте display: table-cell к элементам списка.

И да: если display: table-cell, то float следует убрать ибо он автоматом назначает display: block, а это уже другое поведение.

8
  • Спасибо, но не мог бы ты по подробней? я в css не очень, больше php, просто встал вопрос реализации такого) помоги
    – NoProblems
    20 мар 2012 в 14:56
  • Куда уж подробнее :) Берём код: #nav li { float: left; position: relative; } Меняем на: #nav li { display: table-cell; position: relative; }
    – Syabrowka
    20 мар 2012 в 15:02
  • И вот ещё какой момент: не следует задавать высоту явно. Как раз при масштабировании должно быть понятно почему. Правильнее всего вообще убрать height: 28px;
    – Syabrowka
    20 мар 2012 в 15:03
  • ОГРОМНОЕ спасибо, ты меня выручил )
    – NoProblems
    20 мар 2012 в 15:09
  • теперь выпадающий список <li><a href="#">Европейская кухня</a></li> <li><a href="#">Японская кухня</a></li> <li><a href="#">Корейская кухня</a></li> горизонтально а не вертикально. и еще видно только первую, два остальных залиты белым фоном
    – NoProblems
    20 мар 2012 в 15:13
0

проблема решена, все оставил так как было у меня, только весь список заключил в

#menu {
    clear: both;    
    margin: 0 auto; padding: 0;
    height: 40px;
    width: 790px;   
}
 <div id ="menu">список</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.