Как мне остановить от разделения в середине

#html #css #nav

#HTML #css #nav

Вопрос:

Я создаю эту панель навигации с <nav> помощью элемента. У меня есть одна ссылка, плавающая вправо, а остальные плавающие влево, чтобы максимизировать размер панели навигации. Однако, насколько я могу судить, все пространство между ссылкой nth-1 и n вообще не имеет цвета фона или присутствия. Код чрезвычайно простой, если кто-то не против посмотреть на результат, это будет иметь больше смысла.

 nav {
  background-color: #333;
}
nav ul {
  list-style-type: none;
  width: 95%;
  padding: 0;
  margin: 0 auto;
  background-color: #333;
}
nav ul li {
  float: left;
  background-color: #333;
}
nav ul li a {
  font-size: 21px;
  display: block;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
}

 <nav>

  <ul>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li style='float:right;'><a href='#'>Link</a>
    </li>
  </ul>

</nav>

Ответ №1:

Вам нужно будет установить высоту либо nav или ul , потому что она содержит плавающие элементы (и, следовательно, не имеет высоты).

 nav {height: 60px;}

смотрите этот fddle: https://jsfiddle.net/cm9jsyb5 /

Ответ №2:

Вы можете рассматривать его как flexbox:

1.) Добавить display: flex; в nav ul . Это заставляет все li элементы сгибать элементы.

2.) Измените встроенный стиль в последнем li элементе на margin-left: auto . Это перемещает этот элемент в крайнее правое положение.

(Я также изменил цвет текста ссылки, чтобы получить лучший контраст на темном фоне, плюс я удалил совсем немного CSS, который вам не нужен, если вы используете flexbox)

 nav {
  background-color: #333;
}
nav ul {
  display: flex;
  list-style-type: none;
  width: 95%;
  padding: 0;
  margin: 0 auto;
}
nav ul li a {
  color: #fa0;
  font-size: 21px;
  display: block;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
}

 <nav>

  <ul>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li style='margin-left: auto;'><a href='#'>Link</a>
    </li>
  </ul>

</nav>

1. Лучше, чем добавление фиксированной высоты, по большому счету. Стоит отметить отсутствие поддержки flex в IE 9 в обратном направлении и глючную поддержку в более новых версиях IE. Однако Edge в порядке: caniuse.com/#feat=flexbox

Ответ №3:

Вам нужно clearfix для foats. Плавающие элементы удаляются из обычного потока документов, поэтому родительский элемент сворачивается. Для этого есть несколько исправлений, clearfix является распространенным подходом. Другой — плавающий родительский элемент.

 nav {
  background-color: #333;
}
nav ul {
  list-style-type: none;
  width: 95%;
  padding: 0;
  margin: 0 auto;
  background-color: #333;
}
nav ul li {
  float: left;
  background-color: #333;
}

nav ul li:last-child {
  float: right;  
}
nav ul li a {
  font-size: 21px;
  display: block;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
}

.clearfix {
  overflow: auto;
  zoom: 1;
}

 <nav>

  <ul class="clearfix">
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
    <li><a href='#'>Link</a>
    </li>
  </ul>

</nav>

Подробнее об этом поведении поплавков см.: https://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods /

Также обратите внимание, что вы можете использовать last-child и избавиться от встроенного стиля.