块充当嵌入式块？

时间：2018-10-28 21:34:32

标签： html css

我当前正在建立一个网站，而下拉导航栏无法正常工作。当我将鼠标悬停在导航栏上的每个元素上时，下拉菜单会按需删除，但是即使CSS将这些元素分配为普通块，这些元素也会被内联阻止。

这是我的代码，如下所示：

body {
  background-color: #555;
}

.navbar {
  width: 100%;
  height: 70px;
  background-color: #000000;
}

.logo {
  float: left;
  padding: 15px;
}

.navbar ul {
  margin: 0;
  padding: 0;
  float: left;
  list-style-type: none;
}

.navbar ul li {
  float: left;
}

.nav-item {
  display: block;
  padding: 15px 40px;
  height: 68px;
  line-height: 40px;
  color: white;
  text-decoration: none;
}

.nav-item:hover {
  background-color: darkred;
  color: white;
  text-decoration: none;
}

.nav-item:focus {
  background-color: darkred;
  color: white;
  text-decoration: none;
}

.nav-sub {
  background-color: #000000;
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.nav-sub a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.nav-sub a:hover {
  background-color: darkred;
}

.navbar ul li:hover .nav-sub {
  display: block;
}
<nav class="navbar">
  <div class="logo">
    <a href="~/Views/Home/Index.cshtml">
      <img src="~/Content/Pictures/CuttingEdgeWhite.png" style=" width: 200px; height: 50px;" />
    </a>
  </div>
  <ul>
    <li>
      <a href="#" class="nav-item">Electrical</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Lighting</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Energy</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">National Accounts</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Contact Us</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Service Request</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Careers</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</nav>

我已经看到，有一个父元素浮动，这不允许inline-block正常工作，但是我不知道该如何解决。任何帮助将不胜感激！

2 个答案:

答案 0 :(得分：1)

修复浮动解决方案

这是最快的解决方案，您的CSS中有一个贪婪的规则：

.navbar ul li {
  float: left;
}

此规则的问题在于也会影响下拉列表。将此更改修复为：

.navbar > ul > li {
  float: left;
}

Flexbox解决方案

  • 使用display: flex设置两个ul列表，这避免了使用浮点数。
  • 从元素中删除了所有float
  • 使用flex-direction: column设置ul下拉列表，这样它将垂直显示。

看看下面的例子：

body {
  background-color: silver;
}

.navbar {
  width: 100%;
  height: 70px;
  background-color: #000000;
}

.logo {
  padding: 15px;
}

.navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}

.nav-item {
  display: block;
  padding: 15px 40px;
  height: 68px;
  line-height: 40px;
  color: white;
  text-decoration: none;
}

.nav-item:hover {
  background-color: darkred;
  color: white;
  text-decoration: none;
}

.nav-item:focus {
  background-color: darkred;
  color: white;
  text-decoration: none;
}

.nav-sub {
  background-color: #000000;
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.nav-sub ul {
  flex-direction: column;
}

.nav-sub a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.nav-sub a:hover {
  background-color: darkred;
}

.navbar ul li:hover .nav-sub {
  display: block;
}
<nav class="navbar">
  <div class="logo">
    <a href="~/Views/Home/Index.cshtml">
      <img src="~/Content/Pictures/CuttingEdgeWhite.png" style=" width: 200px; height: 50px;" />
    </a>
  </div>
  <ul>
    <li>
      <a href="#" class="nav-item">Electrical</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Lighting</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Energy</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">National Accounts</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Contact Us</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Service Request</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Careers</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</nav>

答案 1 :(得分：0)

它们不充当内联块，它们充当浮动元素……因为您正在浮动它们。

.navbar ul li {
  float: left;
}

如果要垂直放置它们，请勿漂浮它们。

.navbar > ul > li {
  float: left;
}
相关问题
最新问题