导航栏在调整大小时添加不必要的行

Question

我正在制作一个带有导航栏的网站，但是当我调整页面大小时，有时 link 会多出一行，如下所示：Navbar Example

我该如何解决这个问题？这是我的代码：

body {
    margin: 0;
    background-color: white;
}

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    background-color: #F27930;
    box-shadow: 5px 0px 0px 0px 5px lightgrey;
}

li {
    float: left;
    font-family: roboto;
    color: white;
}

li a.link {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
}

li a.current {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.divider {
    display: block;
    top: 50%;
    font-size: 25px;
    color: #FCD031;
    text-align: center;
    padding: 8px 2px;
    text-decoration: none;
}

li a:hover {
    background-color: #feae02;
}

li a.current:hover {
    background-color: #F27930;
}

li a.divider:hover {
    background-color: #F27930;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<div class="sticky">
    <ul>
        <li><a class="current"><b>Jump to Article:</b></a></li>
        <!-- <hr class="hrNav"> -->
        <li><a class="link" href="#top">Top</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article1">Article 1</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article2">Article 2</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article3">Article 3</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article4">Article 4</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article5">Article 5</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article6">Article 6</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article7">Article 7</a></li>
    </ul>
</div>

如有任何帮助，我们将不胜感激！

谢谢，碧玉

Answer 1

避免导航栏自动换行的唯一方法是在导航栏上设置最小宽度，或者在屏幕太小时添加媒体查询来更改它。

使用 min-width CSS 属性。

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width-device-width, initial-scale-1.0">
  <title>Navbar Example</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      background-color: white;
    }
    
    div.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
    
    ul {
      list-style-type: none;
      margin: 0;
      padding-left: 0px;
      padding-right: 0px;
      overflow: hidden;
      background-color: #F27930;
      box-shadow: 5px 0px 0px 0px 5px lightgrey;
    }
    
    li {
      float: left;
      font-family: roboto;
      color: white;
    }
    
    li a.link {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 14px;
      text-decoration: none;
    }
    
    li a.current {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    .divider {
      display: block;
      top: 50%;
      font-size: 25px;
      color: #FCD031;
      text-align: center;
      padding: 8px 2px;
      text-decoration: none;
    }
    
    li a:hover {
      background-color: #feae02;
    }
    
    li a.current:hover {
      background-color: #F27930;
    }
    
    li a.divider:hover {
      background-color: #F27930;
    }
  </style>
</head>

<body>
  <div class="sticky">
    <ul style="min-width:884px">
      <li><a class="current"><b>Jump to Article:</b></a></li>
      <!-- <hr class="hrNav"> -->
      <li><a class="link" href="#top">Top</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article1">Article 1</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article2">Article 2</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article3">Article 3</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article4">Article 4</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article5">Article 5</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article6">Article 6</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article7">Article 7</a></li>
    </ul>
  </div>
</body>

</html>

Answer 2

这是一个填充问题。

所以，会有 2 个解决方案。

当浏览器宽度较小时，使用@media 让菜单包含面包屑。
如果您要通过换行强制显示导航项，请使用flex

只需在您的 ul 样式中添加 2 行

ul {
  ...
  display: flex;
  flex-flow: row wrap;
}

所以，最后的结果会是

body {
    margin: 0;
    background-color: white;
}

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    background-color: #F27930;
    box-shadow: 5px 0px 0px 0px 5px lightgrey;
}

li {
    float: left;
    font-family: roboto;
    color: white;
}

li a.link {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
}

li a.current {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.divider {
    display: block;
    top: 50%;
    font-size: 25px;
    color: #FCD031;
    text-align: center;
    padding: 8px 2px;
    text-decoration: none;
}

li a:hover {
    background-color: #feae02;
}

li a.current:hover {
    background-color: #F27930;
}

li a.divider:hover {
    background-color: #F27930;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<div class="sticky">
    <ul>
        <li><a class="current"><b>Jump to Article:</b></a></li>
        <!-- <hr class="hrNav"> -->
        <li><a class="link" href="#top">Top</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article1">Article 1</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article2">Article 2</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article3">Article 3</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article4">Article 4</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article5">Article 5</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article6">Article 6</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article7">Article 7</a></li>
    </ul>
</div>

导航栏在调整大小时添加不必要的行

Navbar adds unneccisary line when resized

html

css

html-lists

navbar