Ul table like in css

Question

Я страдаю от создания красивых меню с элементами ul и li. например когда у меня есть только 4 пункта меню, я даю им такую ​​же ширину 20%, и он никогда не сломается, то же самое работает даже на 6 пунктов меню. Я даю им ширину 16,66666%, которую поддерживает CSS. Но теперь есть проблема, это работает только для элементов, которые могут иметь такую ​​же ширину, что я ищу, это решение для разных элементов ширины, и есть условие, контейнер должен быть каждый раз 100% или 1000 пикселей (просто полная ширина) и li's не может переполнить контейнер и контейнер должен быть в центре, как:

<div class="container"> 
    <ul> 
    <li>Item1</li> 
    <li>Longnameitem 2</li> 
    <li>it3</li> 
    <li>SuperlongnameItem 4</li> 
    <li>Item5</li> 
    </ul> 
</div> 

Обычно мой CSS будет, как:

.container { 
    position: relative; 
    margin: 0 auto; 
    width: 1000px; 
    height: 30px; 
} 
.container ul { 
    position: relative; 
    width: 100%; 
    height: 30px; 
} 
.container ul li { 
    position: relative; 
    width: 20%; 
    display: block; 
    float: left; 
    margin: 0px; 
} 

Это прекрасно работает, но мне нужно динамическая ширина для каждого лития «таблица, как» , есть идеи? трюки? настольные CSS-трюки? или другой? (Если есть ошибка, игнорировать его, я просто напечатал это, например)

JSFiddle

Answer 1

Посмотрите в 'Flexbox'

Первый Check here для его поддержки браузера.

Here is an example with your code menu (ul/li) code using flexbox

---

Установка

CSS

.grid { 
     display: -webkit-flex; 
     display: flex; 
    } 
    .col { 
     background: #ccc; 
     padding: 30px; 
    } 
    .fluid { 
     flex: 1; 
    } 
    .fixed { 
    background: red; 
    width: 400px; 
    } 

MARKUP

<div class="grid"> 
    <div class="col fluid"> ...</div> 
    <div class="col fixed"> ...</div> 
    <div class="col fluid"> ...</div> 
</div> 

Обратите внимание, как мы можем установить paddings на эти элементы «layout», и все в порядке, обратите внимание, как нам не нужно «очищать» поплавки. Качественный товар.

Улыбка CSS example here от Chris Coyier из CSS-трюков, из которых был взят вышеприведенный фрагмент.

---

Answer 2

CSS Динамические ширины контроля с использованием менее Примеси для UL-х и LI в

1. Firsty, рассмотрим шаги в этой статье: CSS Intro to LESS Mixins
2. Создать CSS классы, связанные свойства и ID Наборы правил для ваши UL и LI
3. Проверка прохождения нескольких аргументов для изменения ваших UL и LI с различной динамической шириной
4. испытание с использованием гвардии и применять условия адаптировать как МЕНЬШЕ подмешать, используются при сохранении полной ширины вашего контейнера, центрирования и предотвращения переполнения
5. испытания с использованием операторов и МЕНЬШЕ, чтобы достичь желаемых пропорций между стилями элементами

Был ли это полезно ?Если вы пройдете через этот подход LESS Mixin к рефакторингу CSS, то в долгосрочной перспективе вы, надеюсь, получите удовольствие от создания меню! Пожалуйста, дайте мне несколько отзывов и дайте мне знать, как вы идете!