Html 如何在div中的内联链接之间均匀分配空间？_Html_Css

Html 如何在div中的内联链接之间均匀分配空间？

html css

Html 如何在div中的内联链接之间均匀分配空间？,html,css,Html,Css,我希望在链接之间平均分配空间，因此每个链接占用包含div的1/3空间。它们位于该div内的全部原因是因为我想将其与横幅对齐，我不确定如何进行其他操作这是一把小提琴： .bruceBanner img{ 边框：2件纯黑；高度：172px；宽度：553px；显示：块；保证金：0自动； } 李先生{ 边框：1px纯黑；显示：内联；字体大小：25px； } #导航栏{ 边框：1px纯黑；宽度：553px；保证金：0自动； } 使用flexbox并设置为或：之间

我希望在链接之间平均分配空间，因此每个链接占用包含div的1/3空间。它们位于该div内的全部原因是因为我想将其与横幅对齐，我不确定如何进行其他操作

这是一把小提琴：

.bruceBanner img{
边框：2件纯黑；
高度：172px；
宽度：553px；
显示：块；
保证金：0自动；
}
李先生{
边框：1px纯黑；
显示：内联；
字体大小：25px；
}
#导航栏{
边框：1px纯黑；
宽度：553px；
保证金：0自动；
}

使用flexbox并设置为或：

```
之间的空格
```
都均匀地分布在这条线上。[……]
```
周围的空格
```
在直线上均匀分布，两端各有一半大小的空间。[……]

.navLinks{
显示器：flex；
证明内容：周围的空间；
}

.bruceBanner img{
边框：2件纯黑；
高度：172px；
宽度：553px；
显示：块；
保证金：0自动；
}
李先生{
边框：1px纯黑；
显示：内联；
字体大小：25px；
}
#导航栏{
边框：1px纯黑；
宽度：553px；
保证金：0自动；
}
.导航链接{
显示器：flex；
填充：0；
证明内容：周围的空间；
}

使用flexbox并设置为或：

```
之间的空格
```
都均匀地分布在这条线上。[……]
```
周围的空格
```
在直线上均匀分布，两端各有一半大小的空间。[……]

.navLinks{
显示器：flex；
证明内容：周围的空间；
}

.bruceBanner img{
边框：2件纯黑；
高度：172px；
宽度：553px；
显示：块；
保证金：0自动；
}
李先生{
边框：1px纯黑；
显示：内联；
字体大小：25px；
}
#导航栏{
边框：1px纯黑；
宽度：553px；
保证金：0自动；
}
.导航链接{
显示器：flex；
填充：0；
证明内容：周围的空间；
}

我看到flexbox解决方案已经发布，所以我将发布

表格/表格单元格

解决方案。这是一个简单但有效的方法，您不必担心浏览器之间的差异

.bruceBanner img{
边框：2件纯黑；
高度：172px；
宽度：553px；
显示：块；
保证金：0自动；
}
#导航栏{
边框：1px纯黑；
宽度：553px；
保证金：0自动；
}
/*将容器设置为类似于表*/
.导航链接{
显示：表格；
表布局：固定；/*均匀地隔开所有元素*/
/*删除默认样式*/
宽度：100%；
保证金：0；
填充：0；
}
李先生{
显示：表格单元格；/*设置为表格单元格*/
文本对齐：居中；
字体大小：25px；
填充：10px；
}
.导航链接{
边框：1px纯黑；
}

我看到flexbox解决方案已经发布，所以我将发布

表格/表格单元格

解决方案。这是一个简单但有效的方法，您不必担心浏览器之间的差异

.bruceBanner img{
边框：2件纯黑；
高度：172px；
宽度：553px；
显示：块；
保证金：0自动；
}
#导航栏{
边框：1px纯黑；
宽度：553px；
保证金：0自动；
}
/*将容器设置为类似于表*/
.导航链接{
显示：表格；
表布局：固定；/*均匀地隔开所有元素*/
/*删除默认样式*/
宽度：100%；
保证金：0；
填充：0；
}
李先生{
显示：表格单元格；/*设置为表格单元格*/
文本对齐：居中；
字体大小：25px；
填充：10px；
}
.导航链接{
边框：1px纯黑；
}

试试这个代码
他在为我工作

.bruceBanner img {
  border: 2px solid black;
  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;
}
.navLinks{
padding: 0px;
}
.navLinks li {
  border: 1px solid black;
  display: inline-block;
  font-size: 25px;
  width:32%;
}
#navBar {
  border: 1px solid black;
  width: 553px;
  margin: 0 auto;
}





 <div class="bruceBanner">
      <a href="#">
        <img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
      </a>
    </div>

    <nav id="navBar">
      <ul class="navLinks">
        <li><a href='#'>About</a>
        </li>
        <li><a href='#'>Hours</a>
        </li>
        <li><a href='#'>Contact</a>
        </li>
      </ul>
    </nav>

.bruceBanner img{
边框：2件纯黑；
高度：172px；
宽度：553px；
显示：块；
保证金：0自动；
}
.导航链接{
填充：0px；
}
李先生{
边框：1px纯黑；
显示：内联块；
字体大小：25px；
宽度：32%；
}
#导航栏{
边框：1px纯黑；
宽度：553px；
保证金：0自动；
}

试试这个代码
他在为我工作

.bruceBanner img {
  border: 2px solid black;
  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;
}
.navLinks{
padding: 0px;
}
.navLinks li {
  border: 1px solid black;
  display: inline-block;
  font-size: 25px;
  width:32%;
}
#navBar {
  border: 1px solid black;
  width: 553px;
  margin: 0 auto;
}





 <div class="bruceBanner">
      <a href="#">
        <img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
      </a>
    </div>

    <nav id="navBar">
      <ul class="navLinks">
        <li><a href='#'>About</a>
        </li>
        <li><a href='#'>Hours</a>
        </li>
        <li><a href='#'>Contact</a>
        </li>
      </ul>
    </nav>

.bruceBanner img{
边框：2件纯黑；
高度：172px；
宽度：553px；
显示：块；
保证金：0自动；
}
.导航链接{
填充：0px；
}
李先生{
边框：1px纯黑；
显示：内联块；
字体大小：25px；
宽度：32%；
}
#导航栏{
边框：1px纯黑；
宽度：553px；
保证金：0自动；
}

hi xD 您的css：您的html：

所以你想让它们分散在中间，而不是仅仅在中间粘在一起？Flexbox将是最好的方式。当我将它们边界化时，它更容易在中看到。我基本上希望它们均匀地分布在div中（必须保持在横幅图像的中心）。但正如你所说，是的。像这样？就像那样，谢谢：）我需要阅读flex！重复-所以你想让它们分散在中心，而不是仅仅在中心粘在一起？Flexbox是最好的方式。当我有了它时，它更容易看到

<body>

  <div class="bruceBanner">
    <a href="#">
      <img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
    </a>
  </div>

<nav id="navBar">
  <ul class="navLinks">
   <li class="li1"><a href='#'>About</a></li>
   <li class="li2"><a href='#'>Hours</a></li>
   <li class="li3"><a href='#'>Contact</a></li>
  </ul>
</nav> <!--#navBar-->
</body>