html/css中带有左对齐和居中对齐按钮的导航栏？答案

【问题标题】：Navigation bar with left and center aligned buttons in html/css?html/css中带有左对齐和居中对齐按钮的导航栏？
【发布时间】：2022-08-19 02:10:15
【问题描述】：

Example of what the navigation bar should look like

我正在用 html/css 制作我的第一个网站，我想制作一个可以适应移动屏幕的固定导航栏。它应该有一个左对齐的“home”按钮，其余按钮居中对齐。我怎样才能用 HTML/CSS 做这个？谢谢！

这是我目前的代码：

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

  li a {
    font-size: 14px;
    line-height: 17px;
    font-family: \'Inter\', sans-serif; 
    font-weight: 500;
  }

  ul {
    list-style-type: none;
    background-color: rgba(255, 255, 255, 0.4);
    border: 1.5px solid rgba(0, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    display: inline-block;
}

li a {
  text-decoration: none;
    color: rgba(0, 0, 0, 0.60);
    text-align: center;
    padding: 12px 40px;
    display: block;
    transition:all 0.3s ease 0s;
    text-align: center;
}

li a:hover {
    color:black;
}


.left-links{
  flex:1 1 200px;
  text-align: left;
}

<html>
  <head>
    <meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <link rel = \"stylesheet\" href=\"navBar.css\">
    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
    <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">
  </head>
  
<div>
  <ul>
    <div class=\"left-links\">
      <li><a href=\"index.html\">Home</a></li>
    </div>
    <nav>

      <li><a href=\"index.html\">Work</a></li>
      <li><a href=\"me.html\">Me</a></li>
      <li><a href=\"play.html\">Play</a></li>
    </nav>
  </ul>
</div>

  <body>
    <h1>Hello</h1>
   
  </body>
</html>

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

标签： html css flexbox

【解决方案1】：

您可以通过在 css 文件中将 .left-links 下的 flex: 0.5; 更改为 flex: 0.5; 来实现您想要的。

编辑：对不起，我也忘了告诉你在你的css文件中添加display: flex;到ul

【讨论】：

【解决方案2】：

我已经稍微修改了代码，但这就是我要解决的问题。

通过将相关的链接的每个部分放在一个flex-box div 中，并将整个导航元素本身显示为一个 flex。我们可以独立处理每组链接，以及作为一个整体的导航。

将flex-grow 添加到.right-links 将继承主页按钮剩余的全部空间，并添加justify-content: center; 将.right-links 居中在该剩余空间中。这将适用于屏幕宽度，并在可能不需要列表时减少使用列表的混乱。

希望这可以帮助！

body {
    background-color: white;
    margin:0;
  }
a {
    font-size: 14px;
    line-height: 17px;
    font-family: 'Inter', sans-serif; 
    font-weight: 500;
}

  nav {
    display:flex;
    align-items:center;
    list-style-type: none;
    background-color: rgba(255, 255, 255, 0.4);
    border: 1.5px solid rgba(0, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
}

a {
  text-decoration: none;
    color: rgba(0, 0, 0, 0.60);
    text-align: center;
    padding: 12px 40px;
    display: block;
    transition:all 0.3s ease 0s;
    text-align: center;
}

a:hover {
    color:black;
}


.left-links{
  display:flex;
  text-align: left;
}
.right-links{
  justify-content:center;
  flex-grow:1;
  display: flex;
  flex:1 1 200px;
  text-align: left;

}

<html>
  <head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href="navBar.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  </head>
  
<div>
    <nav>
      <div class="left-links">
        <a href="index.html">Home</a>
      </div>
      
      <div class="right-links">
        <div>
            <a href="index.html">Work</a>
        </div>
        <div>
          <a href="me.html">Me</a>
        </div>
        <div>
          <a href="play.html">Play</a>
        </div>
      </div>
  </nav>
</div>

  <body>
    <h1>Hello</h1>
   
  </body>
</html>

【讨论】：