html - 将 li 元素包含在导航栏中

Question

在大多数情况下，我的导航栏按照我想要的方式运行，但是当我接近 600 像素的屏幕尺寸时，我的 li 元素开始超出导航栏的边界，我打算始终将它们保持在内部那里。

将事物保持在固定位置也是我在其他几个方面遇到的困难。这是 HTML:

 <header>
      <nav>
        <div class="header-black">
          <img src="resources/img/logo-header.png" alt="logo" class="logo">
          <i class="ion-navicon-round icon-small"></i>
        </div>
        <div class="header-pages">
          <ul class="main-nav">
            <li><i class="ion-ios-person icon-small"></i>
              <a href="#single-attendee">
                <p>Single Atendee</p>
              </a>
            </li>
            <li><i class="ion-ios-people icon-small"></i>
              <a href="#group-tickets">
                <p>Group Tickets</p>
              </a>
            </li>
            <li><i class="ion-arrow-move icon-small"></i>
              <a href="#investors">
                <p>Investors</p>
              </a>
            </li>
            <li><i class="ion-location icon-small"></i>
              <a href="#startups">
                <p>StartUps</p>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

这是相关的 CSS:

.header-pages {
  height: 60px;
  background-color: #F6FBFC;
  text-align: center;
}

.header-pages nav ul {
  white-space: nowrap;
}

.header-pages nav ul li {
  min-width: 55px;
}

.header-pages .main-nav li {
  display: inline-block;
  margin-left: 80px;
  padding: 5px 0;
  color: #cccccc;
  text: #cccccc;
  text-transform: uppercase;
  font-size: 30%;
}


.header-pages .main-nav li p {
  padding-top: 7px;
  text-decoration: none;
  font-size: 100%;
  float:right;
}



.header-pages .main-nav li:hover a,
.header-pages .main-nav li:hover i,
.header-pages .main-nav li:hover p
 {
  color: #0198E1;
}


.header-pages .main-nav li a:focus i,
.header-pages .main-nav li a:focus p
 {
  color: #0198E1;
}

Answer 1

li 元素在某些时候需要换行(除非您找到其他解决方案，例如导航图标和仅在单击或鼠标悬停时出现的隐藏垂直菜单)。

要使导航栏背景覆盖 li 元素，您唯一需要更改的是将其“height”属性更改为“min-height”，这将允许它根据其内容变得更高:

.header-pages {
  min-height: 60px;
  background-color: #F6FBFC;
  text-align: center;
}

.header-pages nav ul {
  white-space: nowrap;
}

.header-pages nav ul li {
  min-width: 55px;
}

.header-pages .main-nav li {
  display: inline-block;
  margin-left: 80px;
  padding: 5px 0;
  color: #cccccc;
  text: #cccccc;
  text-transform: uppercase;
  font-size: 30%;
}


.header-pages .main-nav li p {
  padding-top: 7px;
  text-decoration: none;
  font-size: 100%;
  float:right;
}



.header-pages .main-nav li:hover a,
.header-pages .main-nav li:hover i,
.header-pages .main-nav li:hover p
 {
  color: #0198E1;
}


.header-pages .main-nav li a:focus i,
.header-pages .main-nav li a:focus p
 {
  color: #0198E1;
}

 <header>
      <nav>
        <div class="header-black">
          <img src="resources/img/logo-header.png" alt="logo" class="logo">
          <i class="ion-navicon-round icon-small"></i>
        </div>
        <div class="header-pages">
          <ul class="main-nav">
            <li><i class="ion-ios-person icon-small"></i>
              <a href="#single-attendee">
                <p>Single Atendee</p>
              </a>
            </li>
            <li><i class="ion-ios-people icon-small"></i>
              <a href="#group-tickets">
                <p>Group Tickets</p>
              </a>
            </li>
            <li><i class="ion-arrow-move icon-small"></i>
              <a href="#investors">
                <p>Investors</p>
              </a>
            </li>
            <li><i class="ion-location icon-small"></i>
              <a href="#startups">
                <p>StartUps</p>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </header>