CSS, растягивающие дочерние элементы в родительском элементе

79
9

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

Это соответствующий код

#navbar ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}

#navbar li
{
display: inline;
float: left;
width: 33.33%;
}

Вот что обычно выглядит: enter image description here

Но иногда, когда я покидаю страницу и возвращаюсь позже (не после перезагрузки), это происходит: enter image description here Установка отдельной ширины элемента до 33.3% делает его одним пикселем коротким и делает его 33.333% делает проблему хуже...

спросил(а) 2014-04-25T14:54:00+04:00 5 лет, 10 месяцев назад
1
Решение
49

Вы можете легко достичь этого макета, используя вместо этого таблицы css. Широко поддерживается и семантически звучит.

#navbar ul {   
width: 100%;
display: table;
table-layout: fixed; /* makes all cells equal width */
}
#navbar li {
display: table-cell;
}

http://jsfiddle.net/kBnrz/1/

ответил(а) 2014-04-25T15:01:00+04:00 5 лет, 10 месяцев назад
51

Просто подделайте его:

#navbar ul li{
width:33%;
}

#navbar ul li:last-child{
width:34%;
}

Также включите этот стиль:

* { box-sizing: border-box } 

ref: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

ответил(а) 2014-04-25T14:57:00+04:00 5 лет, 10 месяцев назад
49

удалить дополнение родителя "ul"

ответил(а) 2014-04-25T14:57:00+04:00 5 лет, 10 месяцев назад
36

Предложение:

@Miro попробовал CSS Flexbox макет, он вам поможет, но он работает только в современных браузерах.

CSS Flexbox

Модель Flex Flex Box Layout, или "flexbox", является одной из спецификаций в CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Для многих приложений гибкая модель коробки обеспечивает улучшение по сравнению с моделью блока in that it does not use floats, nor do the flex container margins collapse with the margins of its contents.

Вот один пример

Html

<div class="box">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</div>

StyleSheet

html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.box {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: center;
align-items: flex-start;
}

.box div.A {
order:1;
flex: 1 1 auto;
align-self: auto;
min-width: 0;
min-height: auto;
}

.box div.B {
order:2;
flex: 1 1 auto;
align-self: auto;
min-width: 0;
min-height: auto;
}

.box div.C {
order:2;
flex: 1 1 auto;
align-self: auto;
min-width: 0;
min-height: auto;
}

Вот Demo

Эта ссылка поможет вам.

ответил(а) 2014-04-25T15:12:00+04:00 5 лет, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема