Question

我正在尝试在引导程序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>

Answer 1

看看CSS position，尤其是这一点：

绝对

该元素从常规文档流中删除，并且在页面布局中没有为该元素创建空间。

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

其最终位置由上，右，下和左的值确定。

您希望li:before相对于其父li处于绝对位置。因此，您应该给li一个position: relative。

body {
  min-height: 75rem;
  padding-top: 4.5rem;
}


li {
position: relative;}

li:before {
  content: '•••';
  position: absolute;
  right: 1px;
  top: 0px;
  color: aqua;
}

/* only for debugging */
#navbarCollapse {
    display: block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

    
      <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>

导航栏李之间的点

1 个答案: