CSS в равной степени разделяет пустое пространство между элементами, но с максимальным пространством - PullRequest
Новая
       10

CSS в равной степени разделяет пустое пространство между элементами, но с максимальным пространством

0 голосов
/ 06 сентября 2018

Я создаю навигацию ul с другим li, который должен делить пустое пространство одинаково.

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

.container {
  display: flex;
  border: 1px solid red;
}
ul {
  margin: 0 30px 0px 0px;
  display: flex;
  list-style: none;
  padding: 0;
  flex-grow: 1;
  justify-content: space-between;
}
li {
  margin: 0;
  padding: 0px 5px;
  border: 1px solid green;
  flex-basis: 0;
}
li:first-child{
  padding-left: 0px;
}
.secondPart {
  margin-left:auto;
  flex-shrink: 0;
}
<div class=container>
  <ul>
    <li>my elem</li>
    <li>my elem 2</li>
    <li>my elem 3</li>
    <li>my elem 4</li>
  </ul>
  <div class=secondPart>
    <a>my link</a>
  </div>
</div>

Подводя итог проблемы:

li должен иметь динамический пробел между элементами, но максимальный пробел 30px. Я добавил отступы, потому что это должно быть min-space.

Буду очень признателен за любые подсказки!

Fiddle: http://jsfiddle.net/kLu34f1a/14/

1 Ответ

0 голосов
/ 06 сентября 2018

Используйте поле для li и jQuery для измерения длины дочерних элементов

Это приблизит вас. Я бы рекомендовал добавить максимальную ширину к вашему ul

Фрагмент использует jQuery для измерения длины дочерних элементов. Если сумма элементов превышает ширину контейнера, есть функция для изменения поля позиций. Вы заметите, что функция console.log запускается, если вы добавите больше li *

Я установил поле равным 15px для li (по 15 с каждой стороны для максимального разделения 30 пикселей) 

var containerWidth = $("#li-container").outerWidth();

console.log(containerWidth);

var w = 0;
// the 'true' paramater inside the outerWidth function includes margins
$("#li-container li").each(function(){
  w += $(this).outerWidth(true);
});

console.log(w);

// if the total length of the line items is more than the container, do this event
if(w>containerWidth) {

$("#li-container li").each(function(){
$(this).css("margin", "0px 5px");
});

console.log(w);

}
.container {
  display: flex;
  border: 1px solid red;
}
ul {
  margin: 0 30px 0px 0px;
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: center;
  max-width: 600px;
}
li {
  margin: 0 15px;
  padding: 0px 5px;
  border: 1px solid green;
  flex-basis: 0;
}
li:first-child{
  padding-left: 0px;
}
.secondPart {
  margin-left:auto;
  flex-shrink: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
  <ul id="li-container">
    <li>my elem</li>
    <li>my elem 2</li>
    <li>my elem 3</li>
    <li>my elem 4</li>
  </ul>
  <div class=secondPart>
    <a>my link</a>
  </div>
</div>
...