如何在导航栏中添加间距？答案

【问题标题】：How to add spacing in NAVIGATION bar?如何在导航栏中添加间距？
【发布时间】：2020-08-29 14:52:55
【问题描述】：

如何在导航栏中添加间距？这是我写的代码顺便说一句我仍然是一个学习编码的菜鸟，所以是的！

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #FFFFFFF;
}

.topnav a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #FFFFFFF;
  color: black;
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>

  <a href="men.html">Men</a>
  
  <a href="women.html">Women</a>
  <a href="our-materials.html">Our Materials</a>
  <a href="stores.html">Stores</a>

</div>

<div style="padding-left:10px">
  <h2>Top Navigation Example</h2>
  <p>Some content..</p>
</div>

请提供我应该做的确切细节，最好是在 html 中

【问题讨论】：

标签： html navigation

【解决方案1】：

您可以通过多种方式添加空间。我建议您删除float:left;，因为这不是目前最好的方法。

尽管您可以将display: inline-block 添加到元素或将display: flex 放入topnav 类。

如果您使用 inline-block，您将能够为 a 添加边距，如果您使用 flex 类型，您可以阅读更多关于 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望您了解并了解更多关于 flex 和显示选项的信息。

【讨论】：

在这个块中用什么把左边带到中心？浮动：左；
我们告诉过你还有其他方法。使用浮点数是 00 年早期了解 flex 的工作原理并显示 css 属性。在 flex justify-content: start 和 display 上，它将以自然的方式显示在左侧。

【解决方案2】：

最好的情况是给你一个类或 id 并编辑一个子元素。我做了保证金：0；消除任何边距，然后声明 margin-right: 5px;这样，它就会整齐地排成一行，没有任何奇怪的间隙。在您的 CSS 中，您还可以添加 text-transform: uppercase;让您的导航全部大写。

从 Bootstrap 4 开始，您可以使用间距实用程序。例如在 nav-item 的类中添加 px-2 以增加填充。

您可以在 CSS 中使用属性填充来更改它：

.navbar-nav > li{
  padding-left:30px;
  padding-right:30px;
}

另外，你可以设置边距

.navbar-nav > li{
  margin-left:30px;
  margin-right:30px;
}

【讨论】：

在这个块中用什么把左边带到中心？浮动：左