Как разделять меню горизонтально между кнопками, используя CSS?

У меня есть выпадающее меню, подобное этому http://www.mrc-productivity.com/forum/cssdropdown.html, закодированное с использованием CSS.Как разделять меню горизонтально между кнопками, используя CSS?

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

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

Есть ли способ сделать это?

источник

2013-03-15 spacing

Если вы знаете, что у вас будет точное количество предметов, занимающих равную ширину, вы должны использовать проценты. Для четырех элементов в родительском div любой ширины вы должны установить ширину элементов на 25%.

Чтобы избежать превышения 100% с границами или заполнением/полями, было бы неплохо установить box-sizing: border-box; на ваши div, чтобы их ширина включала эти дополнительные пиксели.

источник

2013-03-15 21:12:46 John

вещи, я попытался с помощью%, но это портит все меню, например, когда навис деталь будет портить макет и расширить только один до 25 % – spacing

Ну, проценты будут работать на то, чего вы пытаетесь достичь. Если вы столкнулись с большим количеством проблем, возможно, вам придется настроить другие части вашего кода. Не видя кода, я не могу вам помочь. Я могу дать вам [этот быстрый пример на jsfiddle] (http://jsfiddle.net/wTbx9/), демонстрируя элементы меню в процентах и выпадающие списки. – John

Думаю, у меня это есть. Ваш пример сделал это для меня! :) благодаря – spacing

Ну, Джон избил меня, но я тоже пошел проценты, так как вы специально сказали 4 элемента. Также убедитесь, что ваши позиции li установлены на встроенный стол.

http://jsfiddle.net/Lw7Ca/1/

div { 
    margin: 50px; 
    width: 100%; 
    background-color: #f99; 
} 

ul { 
    width: 100%; 
} 

ul li { 
    height: 50px; 
    width: 20%; 
    display: inline-table; 
    border: 1px solid black; 
    padding: 10px; 
}

источник

2013-03-15 21:34:14

Если вы не знаете, сколько li вы в конечном итоге с вами может использовать этот трюк:

li:nth-child(1):nth-last-child(1)  {width: 100%;} 
li:nth-child(1):nth-last-child(2), 
li:nth-child(1):nth-last-child(2)~ li {width: 50%;} 
li:nth-child(1):nth-last-child(3), 
li:nth-child(1):nth-last-child(3)~ li {width: 33.3333%;} 
li:nth-child(1):nth-last-child(4), 
li:nth-child(1):nth-last-child(4)~ li {width: 25%;} 
li:nth-child(1):nth-last-child(5), 
li:nth-child(1):nth-last-child(5)~ li {width: 20%;}

Вы получаете, как это продолжается более больших чисел ...

Я украл это из блога, который я не помню. Это самый умный подход, который я видел до сих пор.

Он показывает мне, как мало я знаю о CSS :)

источник

2013-03-15 22:33:30 Raffael

Как разделять меню горизонтально между кнопками, используя CSS?

ответ

Смежные вопросы