Question

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

  <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;
}

Answer 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>

Answer 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>

Answer 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;
}

使用这个>*

这是示例

导航栏文本在左侧对齐

3 个答案: