导航栏文本左对齐答案

【问题标题】：Nav Bar Text aligned on left导航栏文本左对齐
【发布时间】：2021-07-12 13:56:43
【问题描述】：

我终于实现了制作一个导航栏，其中的文本左对齐，中间有小空格。我认为使用弹性项目不是最好的方法。请告诉我如何将导航栏与左侧之间的空格对齐

  <link rel="stylesheet" href="styles.css" type="text/css">
<body>
    <nav class="container">
        <p class="item1">Events</p>
        <p class="item2">Results</p>
        <p class="item3">Partnering Restaurants</p>
    </nav>
</body>

    *{
    margin: 0%;
    padding: 0%;
}
.container{
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: 1.5em;
    border: solid black 1px;
    background-color: aqua;
    color: blue;
}
.item1{
    flex: 0.1;
}
.item2{
    flex: 0.1;
}
.item3{
    flex: 1;
}

【问题讨论】：

标签： html css

【解决方案1】：

我假设你的导航栏有链接，所以链接的最佳语义标签是<a>。

如果您使用 <a> 而不是 <p>，则无需添加 flexbox 样式，因为 a 是内联元素。

* {
  margin: 0%;
  padding: 0%;
}

.container {
  border: solid black 1px;
  background-color: aqua;
  color: blue;
  padding: 12px;
}

.container a {
  text-decoration: none;
  margin: 0 4px;
}

<nav class="container">
  <a class="item1" href="page1">Events</a>
  <a class="item2" href="page2">Results</a>
  <a class="item3" href="page3">Partnering Restaurants</a>
</nav>

【讨论】：

【解决方案2】：

这是你要找的吗？

*{
    margin: 0%;
    padding: 0%;
}
.container{
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: 1.5em;
    border: solid black 1px;
    background-color: aqua;
    color: blue;
}

nav p {
  padding: 0 10px;
}

    <nav class="container">
        <p class="item1">Events</p>
        <p class="item2">Results</p>
        <p class="item3">Partnering Restaurants</p>
    </nav>

由于nav 有链接，请使用<a> 而不是<p>。所以你nav 标记应该是这样的：

  <nav class="container">
    <a class="item1" href="#">Events</a>
    <a class="item2" href="#">Results</a>
    <a class="item3" href="#">Partnering Restaurants</a>
  </nav>

【讨论】：

【解决方案3】：

请清除您的问题但这是我找到的解决方案

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  </head>
 
  <body>
      <nav class="container">
          <p class="item1">Events</p>
          <p class="item2">Results</p>
          <p class="item3">Partnering Restaurants</p>
      </nav>
  </body>
</html>

这里是css

*{
    margin: 0%;
    padding: 0%;
}
.container{
    display: flex;
    padding: 10px 2%;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 1.5em;
    border: solid black 1px;
    background-color: aqua;
    color: blue;
}
.container > *{
  width: auto;
  padding-right: 5%;
}

我做了什么改变

顶部和底部的填充不需要这个

.item1{
    flex: 0.1;
}
.item2{
    flex: 0.1;
}
.item3{
    flex: 1;
}

使用这个>*

这里是示例

【讨论】：