Html navbar li之间的点_Html_Css_Twitter Bootstrap_Bootstrap 4

Html navbar li之间的点

html css twitter-bootstrap bootstrap-4

Html navbar li之间的点,html,css,twitter-bootstrap,bootstrap-4,Html,Css,Twitter Bootstrap,Bootstrap 4,我试图在引导4导航栏元素之间添加三个点。为了做到这一点，我尝试了li:before语句，但点只出现在右上角，而不是li元素之间。我在这里做错了什么——这让我发疯- 我的CSS是这样的： body { min-height: 75rem; padding-top: 4.5rem; } li:before { content: '•••'; position: absolute; right: 1px; top: 0px; color: aqua; } HTML仅来自

我试图在引导4导航栏元素之间添加三个点。为了做到这一点，我尝试了li:before语句，但点只出现在右上角，而不是li元素之间。我在这里做错了什么——这让我发疯-

我的CSS是这样的：

body {
  min-height: 75rem;
  padding-top: 4.5rem;
}

li:before {
  content: '•••';
  position: absolute;
  right: 1px;
  top: 0px;
  color: aqua;
}

HTML仅来自简单的引导示例：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
    <title>Fixed top navbar example for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="navbar-top-fixed.css" rel="stylesheet">
  </head>

  <body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">Fixed navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" 
        aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
  </body>

</html>

看看，尤其是这一点：

绝对的

该元素将从正常文档流中删除，并且不会在页面布局中为该元素创建空间

它相对于其最近的祖先（如果有的话）定位；否则，它将相对于初始包含块放置

其最终位置由“顶部”、“右侧”、“底部”和“左侧”的值确定

您希望您的li:before相对于其父li进行绝对定位。因此，你应该给你的李一个位置：亲戚

身体{ 最小高度：75雷姆；垫面：4.5rem； } 李{ 位置：相对；} 李：以前{ 内容：“•••”；位置：绝对位置；右：1px；顶部：0px；颜色：浅绿色； } /*仅用于调试*/ 导航栏塌陷{ 显示：块； }

为什么不使用字体图标？您需要位置：相对；在li上，否则伪元素将与下一个非静态定位元素相关，如果没有，则与视口相关。@LGSon：这非常有效-我刚刚错过了位置上的相对部分！谢谢，如果你需要更多的帮助，请告诉我。