Меню CSS / панель навигации: центрированное изображение, ширина жидкости

0

Моя цель - создать панель навигации/меню, которая имеет центрированное изображение, но сжимается, чтобы соответствовать его содержимому. То, как я его разработал сейчас, если страница сжимается, элементы <li>, которые не подходят, попадают в следующую строку, что делает навигационную панель более высокой. Все элементы li и изображение должны уменьшаться, чтобы высота контейнера навигации соответствовала его размеру и заполняла только страницу, а не переполняла.

Образец здесь: http://jsfiddle.net/t5P7y/

<div class="container">
    <div class="nav-bar">
        <ul class="nav-ul">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li><img src="../Logo.png"></li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </div>
</div>
Теги:
css-float
menu

2 ответа

1
Лучший ответ

Попробуйте следующее: http://jsfiddle.net/t5P7y/6/

.nav-ul {
    display: block;
    padding: 0;
    margin: 0;
}
.nav-bar {
    display: block;
    height: 100px;
    background:red;
}
.nav-ul li {
    display: inline-block;
    float:left;
    width:14.2%;
}
.nav-ul img {
    height: auto;
    width: 100%;
}
.container {
    width: auto;
}
Поделиться
  • 0
    отлично сработано! Я потратил больше часа, возиться с этим. Вы выиграли мое одобрение CSS-гуру!
0

Помимо основного вопроса о том, действительно ли это хороший выбор дизайна для навигационной панели, единственный способ, которым я могу это достичь, не введя javascript, - использовать процентную ширину для каждого <li>, предполагая, что количество элементов в вашем список не изменится

.nav-ul li {
    float: left;
    width: 14.28%;
}
Поделиться
  • 0
    Мне бы понравились ваши мысли о том, почему это плохой выбор дизайна; стиль логотипа соответствует центру размещения в моем сознании, поэтому навигационные кнопки логически перемещаются с обеих сторон
  • 0
    Каково желаемое поведение, если окно очень маленькое? Как это будет ухудшаться? Должен ли логотип всегда иметь минимальную ширину?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню