Div с переполнением: скрытый не очищает заполнение плавающего неупорядоченного списка - PullRequest
Новая
       6

Div с переполнением: скрытый не очищает заполнение плавающего неупорядоченного списка

0 голосов
/ 19 июня 2010

Я пытался получить свой div, который содержит плавающие элементы, чтобы увеличить их, чтобы охватить их, но, похоже, он не обращает внимания на заполнение элементов, эффективно их отрубая. Как я могу получить div, чтобы быть правильной высотой для моих элементов списка?

HTML: 

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
  </head>

  <body>
    <div class="nav">
      <ul class="nav">
        <li class="nav"><a class="nav" href="#">One1</a></li>
        <li class="nav"><a class="nav" href="#">Two</a></li>
        <li class="nav"><a class="nav" href="#">Three</a></li>
        <li class="nav"><a class="nav" href="#">Four</a></li>
      </ul>
    </div>

    <div class="after"><h2>Heading</h2></div>
  </body>
</html>

CSS: 

ul.nav, ul li.nav {
  display: inline;
  margin: 0px;
  padding: 0px;
}

ul.nav {
  list-style-type: none;
}

li.nav {
  display: block;
  float: left;
  background-color: red;
}

a.nav {
  background-color: green;
  padding: 10px;
  margin: 0;
}

a:hover.nav {
  background-color: gray;
}

div.nav {
  background-color: blue;
  overflow: hidden;
  width: 100%;
}

div.after {
  clear: left;
}

Ответы [ 3 ]

1 голос
/ 19 июня 2010

Я не уверен, что overflow:hidden работает с плавающими внуками.Я бы предложил удалить display:inline на ul (есть ли какая-то особая причина, по которой он там?) И установить overflow:hidden на ul вместо div.

Создание ul и встроенного элемента с плавающими элементами уровня блока неизбежно приведет к проблемам, поскольку я не думаю, что это действительно так.

Кстати, , там действительнонет необходимости присваивать всем элементам класс;если содержащий div уже имеет класс, вы можете указать его дочерние элементы, например: 

.nav ul {
}
.nav li {
}
// etc.
1 голос
/ 19 июня 2010

Я иду в том же направлении, edl: a, как встроенный элемент, не имеет вертикального заполнения.

Однако IE до IE 7 не работает хорошо с display: inline-block(см. http://www.quirksmode.org/css/display.html),, поэтому я рекомендую вам установить ссылки на display: block. Ваши элементы списка уже перемещены, поэтому это не имеет значения.

В связанной заметке я такжеРекомендуем изменить разметку и таблицу стилей для ясности и читабельности: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Title</title> 

    <link type="text/css" rel="stylesheet" href="/stylesheets/test.css">
  </head>

  <body>
    <ul id="nav">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>

    <h2>Heading</h2>
  </body>
</html>

и 

#nav {
  background-color: blue;
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

#nav li {
  background-color: red;
  float: left;
}

#nav li a {
  background-color: green;
  display: block;
  padding: 10px;
}

#nav li a:hover {
  background-color: gray;
}

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

Таким образом, вы также можете избавиться от ненужных div s, упрощая ваширазметки.

1 голос
/ 19 июня 2010

Если вы говорите о вертикальном заполнении, якорь является встроенным элементом и не имеет вертикальных размеров. Просто установите a.nav{display:inline-block;}, и вы должны получить вертикальный отступ.

...