如何在浏览器中拉伸 UL window

Question

我有一个 UL 作为我网页上的导航栏。目前它一直在屏幕的左侧。我希望它居中并且背景颜色一直向左和向右延伸，如下所示。我需要更改什么才能像顶部示例图像一样在整个页面上拉伸 UL？

这是目前的样子：

这是我的代码：

.parent {
  display: block;
  position: relative;
  float: left;
  line-height: 30px;
  background-color: #1D3567;
}

.parent a {
  margin: 10px;
  color: #FFFFFF;
  text-decoration: none;
}

.parent:hover>ul {
  display: block;
  position: absolute;
}

.child {
  display: none;
}

.child li {
  background-color: #1D3567;
  line-height: 30px;
  border-bottom: #CCC 1px solid;
  border-right: #CCC 1px solid;
  width: 100%;
}

.child li a {
  color: #FFFFFF;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  min-width: 15em;
}

ul ul ul {
  left: 100%;
  top: 0;
  margin-left: 1px;
}

li:hover {
  background-color: #95B4CA;
}

.parent li:hover {
  background-color: #95B4CA;
}

<ul id="nav_ul">
  <li class="parent"><a href="#">Home</a></li>
  <li class="parent"><a href="https:">Outlook Web</a></li>
  <li class="parent"><a href="#">Production</a>
    <ul class="child">
      <li class="parent"><a href="">Hennig South</a></li>
      <li class="parent"><a href="">Hennig Enclosure Systems</a></li>
      <li class="parent"><a href="">Hennig South</a></li>
      <li class="parent"><a href="http://">Factory Andon</a></li>
      <li class="parent"><a href="http://">Web Docs</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#">IT</a>
    <ul class="child">
      <li><a href="http:/">Knowledge Base</a></li>
      <li><a href="http:/">Submit a Ticket</a></li>
      <li class="parent"><a href="http:/">Archived Links</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#">Office Directories</a>
    <ul class="child">
      <li><a href="http:">Hennig</a></li>
      <li><a href="http:">AME</a></li>
    </ul>
  </li>
  <li class="parent"><a href="http:">Hennig Parts</a></li>
  <li class="parent"><a href="http">Factory Andon</a></li>
  <li class="parent"><a href="https">Business Cards</a></li>
  <li class="parent"><a href="#">Reports</a>
    <ul class="child">
      <li class="parent"><a href="#">Global Shop<span class="expand">&raquo;</span></a>
        <ul class="child">
          <li><a href="inventoryl">Inventory Report</a></li>
          <li><a href="sales">Sales Report</a></li>
          <li><a href="quotesl">Quotes Report</a></li>
          <li><a href="workOrder">Work Order Report</a></li>
          <li><a href="prtUsed">Part Where Used Report</a></li>
        </ul>
      </li>
      <li class="parent"><a href="#">Ndustrios<span class="expand">&raquo;</span></a>
      </li>
    </ul>
  </li>
</ul>

Answer 1

使您的 ul 成为一个弹性容器，您可以在其中将子元素居中对齐，并通过添加以下规则将 background-color 应用于此元素而不是 li 子元素：

#nav_ul {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #1D3567;
}

.parent {
  position: relative;
  float: left;
  line-height: 30px;
  background-color: #1D3567;
}

.parent a {
  margin: 10px;
  color: #FFFFFF;
  text-decoration: none;
}

.parent:hover>ul {
  display: block;
  position: absolute;
}

.child {
  display: none;
}

.child li {
  line-height: 30px;
  border-bottom: #CCC 1px solid;
  border-right: #CCC 1px solid;
  width: 100%;
}

.child li a {
  color: #FFFFFF;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  min-width: 15em;
}

#nav_ul {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #1D3567;
}

ul ul ul {
  left: 100%;
  top: 0;
  margin-left: 1px;
}

li:hover {
  background-color: #95B4CA;
}

.parent li:hover {
  background-color: #95B4CA;
}

<ul id="nav_ul">
  <li class="parent"><a href="#">Home</a></li>
  <li class="parent"><a href="https:">Outlook Web</a></li>
  <li class="parent"><a href="#">Production</a>
    <ul class="child">
      <li class="parent"><a href="">Hennig South</a></li>
      <li class="parent"><a href="">Hennig Enclosure Systems</a></li>
      <li class="parent"><a href="">Hennig South</a></li>
      <li class="parent"><a href="http://">Factory Andon</a></li>
      <li class="parent"><a href="http://">Web Docs</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#">IT</a>
    <ul class="child">
      <li><a href="http:/">Knowledge Base</a></li>
      <li><a href="http:/">Submit a Ticket</a></li>
      <li class="parent"><a href="http:/">Archived Links</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#">Office Directories</a>
    <ul class="child">
      <li><a href="http:">Hennig</a></li>
      <li><a href="http:">AME</a></li>
    </ul>
  </li>
  <li class="parent"><a href="http:">Hennig Parts</a></li>
  <li class="parent"><a href="http">Factory Andon</a></li>
  <li class="parent"><a href="https">Business Cards</a></li>
  <li class="parent"><a href="#">Reports</a>
    <ul class="child">
      <li class="parent"><a href="#">Global Shop<span class="expand">&raquo;</span></a>
        <ul class="child">
          <li><a href="inventoryl">Inventory Report</a></li>
          <li><a href="sales">Sales Report</a></li>
          <li><a href="quotesl">Quotes Report</a></li>
          <li><a href="workOrder">Work Order Report</a></li>
          <li><a href="prtUsed">Part Where Used Report</a></li>
        </ul>
      </li>
      <li class="parent"><a href="#">Ndustrios<span class="expand">&raquo;</span></a>
      </li>
    </ul>
  </li>
</ul>

如何在浏览器中拉伸 UL window

how to stretch a UL across the browser window

html

css

dropdown

background-color