使 CSS header 块扩展到页面的两端

Question

显示块没有延伸到两端

https://i.stack.imgur.com/RifQD.png

我无法将可点击链接扩展到页面的两端。我尝试了 inline-block 和块显示属性但它似乎没有将可点击链接扩展到页面的两端。我不确定是否需要在某处插入额外的属性。请参阅下面的 HTML 和 CSS 代码。谢谢！

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Color Flipper</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <nav>
          <div class="nav-center">
           <ul class="nav-links">
              <li>
                <a href="index.html">Color Flipper</a>
              </li>
              <li>
                <a href="hex.html">Simple Hex</a>
              </li>
            </ul>
              
          </div>
    
        </nav>
        <main>
          <div class="container">
            <div class="container2"
            <h2>background color : <span class="color">
              #f1f5f8
              </span></h2>
            </div>
            <button class="btn-hero" id="btn">click me</button>
          </div>
        </main>
        <script src="script.js"></script>
      </body>
    </html>  

  nav {
      border-bottom: solid black;
    }
    .nav-center {
      display: inline-block;
    }
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      display: flex;
      justify-content: center;
    }
    }
    
    li {
      float: left;
    }
    
    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;  
    }
    
    /* Change the link color to #111 (black) on hover */
    li a:hover {
      background-color: #111;

Answer 1

这就是你想要做的吗？您可以在 nav-center 上使用 display: flex，在 ul 上使用 space between，在 li 上使用 width: 100%

此外，请考虑使用 float CSS 属性 而不是 。有很多其他方法可以在不使用 float 属性.

的情况下做事

现场演示：

nav {
  border-bottom: solid black;
}

.nav-center {
  display: flex;
  justify-content: center;
}

li {
  width: 100%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

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


/* Change the link color to #111 (black) on hover */

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Color Flipper</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <nav>
    <div class="nav-center">
      <ul class="nav-links">
        <li>
          <a href="index.html">Color Flipper</a>
        </li>
        <li>
          <a href="hex.html">Simple Hex</a>
        </li>
      </ul>

    </div>

  </nav>
  <main>
    <div class="container">
      <div class="container2" <h2>background color : <span class="color">
              #f1f5f8
              </span></h2>
      </div>
      <button class="btn-hero" id="btn">click me</button>
    </div>
  </main>
</body>

</html>

使 CSS header 块扩展到页面的两端

Making the CSS header block extend to both end of the page

css

display