CSS: содержит пять плавающих 20% элементов с границами

Я пытаюсь совместить пять горизонтальных элементов меню с "float:left" рядом друг с другом внутри контейнера, который занимает 80% экрана и минимум 960 пикселей. Для этого я изначально установил их минимальную ширину 192px (960/5) и их ширину 20%, но быстро понял, что это плохо работает с добавлением границ 1px, в результате чего одна из кнопок "выбрасывается за борт".

Изменение ширины до 19.895333% и 191px соответственно решило проблему, однако это явно хакерское решение, которое также оставляет уродливое пространство в 2-3 пикселя в правой части меню.

Есть ли более элегантный способ выравнивания этих элементов и учета ширины бонуса, добавляемого границами, отступами и т. Д.? Я попытался "переполнить: скрытый", чтобы просто скрыть все, что может ткнуть за пределы контейнера, но это просто скрывает всю 5-ю кнопку.

Картинка для иллюстрации результата:

HTML-код:

    <div class="menucontainer">
        <div class="menutab" id="menutab_first">News</div>
        <div class="menutab">Game Guide</div>
        <div class="menutab">Articles</div>
        <div class="menutab">Media</div>
        <div class="menutab" id="menutab_last">Community</div>
    </div>

Код CSS:

.menucontainer {
    height: 26px;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    border-style: solid;
    border-color: #303030 #101010 #000 #101010;
    border-radius: 0px 0px 8px 8px;
}

.menutab {               
    line-height: 26px;
    float: left;
    width: 19.895333%;
    text-align: center;
    min-width: 191px;
    border-right: 1px solid #202020;
    background-image: url('../img/menubutton2.png');
    background-size: 100% 100%;
    font-family: 'Cabin', sans-serif;
}

#menutab_first {
    border-radius: 0px 0px 0px 8px;
}

#menutab_last {
    border-right: 0px;  
    width: 20%;
    min-width: 192px;  
    border-radius: 0px 0px 8px 0px;
}

Заранее спасибо!

Источник

3 ответа

Решение

Для этого вы можете использовать box-sizing Свойство, чтобы установить границы, которые будут появляться внутри ваших элементов, а не за их пределами:

elem {
    -webkit-box-sizing: border-box; /* Some mobile browsers. */
    -moz-box-sizing: border-box; /* Firefox. */
    box-sizing: border-box; /* All other browsers IE8+. */
}

граница-бокс
Заданные ширина и высота (и соответствующие свойства min / max) для этого элемента определяют границу рамки элемента. То есть любые отступы или границы, указанные на элементе, размечаются и отрисовываются внутри указанных ширины и высоты. Ширина и высота содержимого вычисляются путем вычитания ширины границ и отступов соответствующих сторон из указанных свойств "ширина" и "высота".

Итак, в случае вашего CSS:

.menutab {               
    ...
    width: 20%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    ...
}
Источник

Что вам нужно box-sizing:border-box;

Это свойство CSS изменит блочную модель для элемента так, что border включен в widthа не снаружи, как со стандартной коробочной моделью.

Это означает, что ваши поля будут составлять 20% ширины страницы, а не 20% + ширина границ.

Задача решена.

Источник

box-sizing: border-box заставляет ширину границ считаться как часть 20%. Это лучшее решение, но если это каким-то образом повлияет на ваш макет, альтернативой является использование calc вычесть границы из 20%, например : width: calc (20% - 2px);

Источник
Другие вопросы по тегам