Question

在大多数情况下，我的导航栏表现得像我想要的那样，但是当我接近600px的屏幕尺寸时，我的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>

保持导航栏中包含的li元素

1 个答案: