Контейнер заголовка в навигации не виден

#html #css #navigation

#HTML #css #навигация

Вопрос:

У меня проблема с элементом header.main-header. Заголовок не виден в окне просмотра. Я вставил значение высоты, чтобы сделать его видимым. Может ли кто-нибудь помочь мне и объяснить причину, по которой он не виден, когда не вставлена высота.

 .main-header {
  background: yellow;
  padding: 0 3em;
  position: absolute;
  width: 100%;
  top: 0;
  height: 85px;
}

ul {
  padding: 0;
  list-style: none;
}

.main-nav {
  position: relative;
}

.nav-left {
  float: left;
}

.nav-right {
  float: right;
}

.middle {
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
}

.nav-right li {
  display: inline-block;
}

 <header class="main-header">
 <nav class="main-nav">
  <ul class="nav-left">
   <li><a href="">Try Dropbox Business</a></li>
  </ul>

 <div class="middle">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Dropbox_logo_(September_2013).svg/200px-Dropbox_logo_(September_2013).svg.png" alt="Dropbox Logo" />
 </div>

  <ul class="nav-right">
   <a href="#">Download the app</a>
   <li><a href="#">Sign in</a></li>
  </ul>
 </nav>
</header>

Вот моя работа в Codepen:
http://codepen.io/marcvs/pen/Gjwdov?editors=1100

Кроме того, что касается расположения элементов внутри навигации, я изо всех сил старался расположить элементы слева / по центру / посередине. Но правая сторона навигационной панели расширяется вправо, и это дает нижнюю полосу прокрутки. Какой наилучший метод размещения элементов?

Пожалуйста, дайте мне советы по улучшению моей работы. Спасибо.

Ответ №1:

Вам не нужно добавлять так много стиля для создания этого заголовка:

Начните с просмотра вашего тега main-header. Если ширина основного заголовка составляет 100% страницы, навигация по дочернему блоку также будет равна 100%.

Теперь, используя проценты, сделайте так, чтобы ваше меню соответствовало заголовку. в навигаторе есть 3 дочерних элемента, поэтому вы можете установить для каждой ширины 1/3 ширины, и это должно сделать их подходящими. Просто имейте в виду, что границы и отступы учитываются (попробуйте 30% ширины для каждого, указав их с плавающей точкой: слева для всех 3 дочерних элементов).

1. Спасибо. Это также работает. Не могли бы вы еще раз проверить мой codepen. Я использовал технику, которую вы предоставили, но я не понимаю, почему в правой части навигационной панели есть пробел, и она простирается далеко вправо.

2. Не могли бы вы быть более конкретными? Я не уверен в пространстве, которое вы упоминаете.

3. Извините за поздний ответ. Моя проблема уже решена. Я ценю ваше время. Спасибо 🙂

Ответ №2:

Вам нужно очистить после последнего ul, где находится значение float: правильно;

Потому что у вас есть float, а родительский элемент не имеет высоты, когда есть float.

Поэтому после последнего ul поместите div class="clear" с помощью css .clear {очистить:оба;}

Или, если вы используете bootstrap, у вас есть class clearfix. каламбур в навигационном классе="main-nav clearfix"