Question

我有这个标记，我给了背景颜色，但内容刚刚流出背景颜色，即使我给它高度100％和最小高度。

.nav {
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 40px;
  list-style: none;
  border: 1px solid red;
}

.nav li {
  padding-left: 8px;
  padding-right: 8px;
}

<div class="navBar">
  <ul class="nav dark-grey">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>

我只是想在没有框架的情况下进行构建，请有人指出我正确的方向吗？

Answer 1

将.nav的高度更改为auto而不是40px，这样可以使其占用所需的空间。

＆＃13;

.nav {
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: auto;
  list-style: none;
  border: 1px solid red;
}

.nav li {
  padding-left: 8px;
  padding-right: 8px;
}

＆＃13;

<div class="navBar">
  <ul class="nav dark-grey">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>

＆＃13;

Answer 2

那是因为你强迫高度使用高度：40px你需要使用最小高度：40px;

看小提琴

https://jsfiddle.net/bf6nLmL6/

          .nav  {
                  padding: 0;
                  display: flex;
                  flex-wrap: nowrap;
                  flex-direction: column;
                  justify-content: flex-start;
                  align-items: flex-start;
                  min-height: 40px;
                  list-style: none;
                  border: 1px solid red;
           }

Answer 3

我已更新CSS，请检查：

＆＃13;

.nav {
  padding: 0;
  display: flex;
  height: 40px;
  list-style: none;
  border: 1px solid red;
}

.nav li {
  padding: 8px;
  float: left;
}

＆＃13;

<div class="navBar">
  <ul class="nav dark-grey">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>

＆＃13;

第二个选项：

＆＃13;

.nav {
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: auto;
  list-style: none;
  border: 1px solid red;
}

.nav li {
  padding-left: 8px;
  padding-right: 8px;
}

＆＃13;

<div class="navBar">
  <ul class="nav dark-grey">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>

＆＃13;

Answer 4

更改

.nav {
    height: 40px;
    //other codes...
}

收件人：

.nav {
    height: auto;
    //other codes...
}

＆＃13;

.nav {
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: auto;
  list-style: none;
  border: 1px solid red;
}

.nav li {
  padding-left: 8px;
  padding-right: 8px;
}

＆＃13;

<div class="navBar">
  <ul class="nav dark-grey">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>

＆＃13;

我的内容流出了容器的高度

4 个答案: