文章/答案/技术大牛

发布

社区首页 >问答首页 >Navbar在调整尺寸时增加了非婚恋线。

问Navbar在调整尺寸时增加了非婚恋线。
EN

Stack Overflow用户

提问于 2020-10-26 19:37:54

回答 2查看 33关注 0票数 2

我正在创建一个带有导航栏的站点，但是当我调整页面大小时，有时会有一个链接出现在另一行上：Navbar示例。

我怎么才能解决这个问题？这是我的代码：

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>

任何帮助都将不胜感激！

谢谢你，贾斯珀

html-lists

navbar

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-10-26 19:55:44

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

使用最小宽度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>

票数 0

Stack Overflow用户

发布于 2020-10-26 20:19:20

这是一个填充问题。

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

当浏览器宽度较小时，使用@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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64543900

复制

相似问题

问Navbar在调整尺寸时增加了非婚恋线。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Navbar在调整尺寸时增加了非婚恋线。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Navbar在调整尺寸时增加了非婚恋线。
EN