Вопрос по css – Как равномерно распределить пункты меню с помощью CSS, когда ширина и количество не известны?

10

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

У меня есть контейнер с фиксированной шириной - здесь может быть любое количество элементов li автоматической ширины, которые должны быть равномерно распределены по родительскому элементу слева направо.

Вот моя разметка - за исключением того, что может быть любое количество вкладок с любой длиной текста в них.

<ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>

Так что даже распределение с помощью css, когда количество элементов и ширина являются динамическими - это можно сделать?

Кажется, что такая очевидная вещь, которую хочется сделать - Черт CSS!

Ваш Ответ

2   ответа
5

Вот решение, которое сохраняет четную ширину, когда содержимое переполняет выделенную ширину ячейки, используя flexbox:

ul.tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.tabs>li.tab {
  flex: 1;
  text-align: center;
  /* just adding visibility to the tabs */
  border: 1px solid rgba(0,0,0,.12); 
  padding: 10px;
}
<ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3. This is a very long tab and should overflow...</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>

16

Для этого вы можете CSSdisplay:table-cell имущество. Напишите так:

.tabs{
    display:table;
    width:300px;
    border:1px solid green;
}
.tabs li{
    display:table-cell;
    border:1px solid red;
    height:40px;
}

Проверь этоhttp://jsfiddle.net/px7Uf/

Error: User Rate Limit Exceeded Ralphonz
Error: User Rate Limit Exceeded<li>Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Ralphonz
Error: User Rate Limit Exceeded

Похожие вопросы