автоопределение ширины для элемента, содержащего плавающие дочерние элементы

0

Это странное поведение сводит меня с ума. Если я загружу страницу на сервере, первый раз, когда я ее открываю на chrome/safari, я получаю эту проблему:

Изображение 174551

Если я обновляю его или когда я работаю на странице локально, проблем не возникает вообще.

Изображение 174551

Навигатор просто не расширяет свою ширину: auto, чтобы соответствовать всем плавающим элементам.

Это действительно простой код (я удалил несвязанные правила, но если было бы полезно узнать, что я использую webfont):

HTML:

<nav>
  <a href="#">button</a>
  <a href="#">button</a>
  <a href="#">button</a>
  <div class="clear"></div>
</nav>

CSS:

nav {
  position: absolute;
  top: 50%;
  margin-top: -17px;
  width: auto;
  height: 33px;
}

nav > a {
  box-sizing: border-box;
  display: block;
  float: left;
  padding: 11px 13px;
  height: 100%;
  border: 1px solid #7a7e7f;
}

div.clear {
  clear: both;
}
  • 0
    Можете ли вы предоставить jsfiddle, воспроизводящий эту проблему, или ссылку на какой-нибудь другой вид демо?
  • 1
    изменить это отображение: блок; для отображения: встроенный блок;
Показать ещё 2 комментария
Теги:

1 ответ

1
Лучший ответ

В основном настройка ширины элемента nav на 100% делает трюк. Heres оптимизированный пример:

HTML

<nav>
  <a href="#">button</a>
  <a href="#">button</a>
  <a href="#">button</a>
</nav>

CSS

nav {
  position: absolute;
  top: 50%;
  margin-top: -17px;
  width: 100%;
  overflow: hidden; /* Makes the clearing div obsolete */
}

nav > a {
  box-sizing: border-box;
  float: left;
  padding: 11px 13px;
  border: 1px solid #7a7e7f;
}

Проверьте это на Codepen: http://codepen.io/zitrusfrisch/pen/Jcirx

Ещё вопросы

Сообщество Overcoder
Наверх
Меню