Блог

Главная - Вопросы по программированию - пространство между ними не обеспечивает ожидаемых пробелов?

пространство между ними не обеспечивает ожидаемых пробелов?

#html #css #flexbox

Вопрос:

Я хочу, чтобы элементы списка отображались с равным пространством между всеми элементами списка. Я решил закодировать следующее.

 ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

Но это не работает, и я не понимаю, почему?

PS: То же самое работает, если я пишу gap: 10px вместо этого (например, значение px), т. Е. Между элементами списка добавляется пробел. Я подумал, что пространство между ними должно делать то же самое?

ИЗМЕНИТЬ: Вот соответствующий HTML:-

 <div class="left-links">
    <ul>
        <li><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
      </ul>
</div>
<div class="logo">LOGO</div>
<div class="right-links">
    <ul>
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li><a href="#">SIX</a></li>
    </ul>
</div>

1: Что justify-content: space-between; дает результат:

1: Что оправдывает-содержание: пробел; дает в качестве вывода

2: То, что я хочу (а также то, что я получу, если буду использовать gap: 10px; вместо этого:

2: То, что я хочу (а также, я получаю, если использую gap: 10 пикселей; вместо этого

Комментарии:

1. Было бы легче понять, если бы вы могли воссоздать свою реальную проблему в fiddle здесь, если это возможно.

2. ДЕМОНСТРАЦИЯ

Ответ №1:

Попробуйте установить ширину для вашего класса левых и правых ссылок, как показано в приведенном ниже фрагменте. Надеюсь, это вам поможет

 ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}
.container {
  display: flex;
  justify-content: center;
}
.left-links {
  width: 40%;
}
.right-links {
  width: 40%;
}
.logo {
  width: 20%;
  text-align: center;
} 
 <div class="container">
<div class="left-links">
      <ul>
        <li><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
      </ul>
    </div>
    <div class="logo">LOGO</div>
    <div class="right-links">
      <ul>
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li><a href="#">SIX</a></li>
      </ul>
    </div>
</div>
Метки: