Question

到目前为止，我所知道的是，除了漂浮的孩子之外什么都没有父母。

例如，在标题中，我将左侧徽标浮动，文本具有绝对位置。保持标题不折叠的唯一方法是使用正确的徽标。

＆＃13;

header {
  position: relative;
  font-family: "Felix Titling Regular", Times, serif;
  border-bottom: 2px double white;
  font-size: 0;
}

header a {
  display: inline-block;
}

header>a:first-child {
  position: relative;
  padding-left: 3%;
}

header>a:last-child {
  float: right;
  padding-right: 3%;
}

#center-wrapper {
  position: absolute;
  left: 50%;
  top: 25%;
  font-size: 16px;
}

header h1 {
  font-size: 300%;
  display: inline-block;
  position: relative;
  text-transform: capitalize;
  right: 50%;
}

＆＃13;

<header>
  <a href="index.html"><img src="media/logo-small.png" alt="Godfather Logo" title="Godfather Small Logo" /></a>
  <div id="center-wrapper">
    <h1> loyal capos to the don </h1>
  </div>
  <a href="index.html"><img src="media/logo-small.png" alt="Godfather Logo" title="Godfather Small Logo" /></a>
</header>

＆＃13;

然而，我不明白为什么我的第一个父母＆＃39; ul＆＃39;在＆＃39; nav＆＃39;即使所有的li元素都浮动，它仍然具有高度。

＆＃13;

nav {
  position: relative;
  border-top: 2px double #660000;
  text-align: center;
  font-size: 0;
  background-color: #660000;
}

nav>ul {
  display: inline-block;
  font-size: 16px;
  width: 100%;
}

ul {
  list-style-type: none;
}

nav>ul>li {
  min-width: 20%;
  float: left;
}

nav ul ul,
nav ul ul ul {
  position: absolute;
  display: none;
  width: 100%;
}

nav>ul>li:hover>ul {
  display: block;
}

nav>ul>li>ul>li:hover>ul {
  left: 100%;
  top: 0%;
  display: block;
}

ul>li {
  position: relative;
  padding: .4em 0;
  background-color: white;
}

li>a {
  color: #660000;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 150%;
  font-family: "Felix Titling Regular", Times, serif;
  background-color: white;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#">wiki</a></li>
    <li><a href="#">media</a>
      <ul>
        <li><a href="#">images</a></li>
        <li><a href="#">videos</a>
          <ul>
            <li><a href="pages/videos/scenes.html">best scenes</a></li>
            <li><a href="#">bloopers</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">home</a></li>
    <li><a href="#">facts</a></li>
    <li><a href="#">about</a>
      <ul>
        <li><a href="pages/about/feedback.html">feedback</a></li>
        <li><a href="#">contact us</a></li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

这是我的小提琴代码（https://jsfiddle.net/vwb6g740/1/）

Answer 1

块元素和内联元素都是如此，但内联块元素却不是这样。

到目前为止，我所知道的是，除了漂浮的孩子之外什么都没有父母。

你有显示：inline-block;在那个父元素上设置。

我无法解释原因，但我可以重现这种行为。

p {
  display: inline-block;
  background: blue;
}

div {
  background: red;
}

span {
  background: green;
}

i {
  float: left;
}

<div><i>test</i></div>
<span><i>test</i></span>
<p><i>test</i></p>

即使<li>浮动，<ul>也不会崩溃？

1 个答案: