如何在div的內聯鏈接之間平均分配空間？

Question

我希望在鏈接之間平均分配空間，因此每個鏈接都占包含div的空間的1/3。 他們之所以在此div之內，是因為我想將其與橫幅對齊，否則我不確定該如何做。

這是一個小提琴： https : //jsfiddle.net/yuy84gmq/13/

 .bruceBanner img { border: 2px solid black; height: 172px; width: 553px; display: block; margin: 0 auto; } .navLinks li { border: 1px solid black; display: inline; font-size: 25px; } #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> <!--#navBar-->

Answer 1

使用flexbox並將justify-content設置justify-content space-between或space-around ：

space-between
彈性物料均勻地分布在生產線上。 [...]

space-around
伸縮項均勻地分布在行中，兩端均留有一半大小的空間。 [...]

.navLinks {
  display: flex;
  justify-content: space-around;
}

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

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

Answer 2

我看到一個flexbox解決方案已經發布，所以我將發布table/table-cell解決方案。 這是一個簡單但有效的方法，您不必擔心瀏覽器的差異。

 .bruceBanner img { border: 2px solid black; height: 172px; width: 553px; display: block; margin: 0 auto; } #navBar { border: 1px solid black; width: 553px; margin: 0 auto; } /* set the container to act like a table */ .navLinks { display: table; table-layout: fixed; /* evenly space all elements */ /* remove default styling */ width: 100%; margin: 0; padding: 0; } .navLinks li { display: table-cell;/* set to a table-cell */ text-align: center; font-size: 25px; padding: 10px; } .navLinks a { border: 1px solid black; }

 <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> <!--#navBar-->

Answer 3

試試這個代碼
為我工作

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

Answer 4

嗨xD

您的CSS：

.bruceBanner img {
  border: 2px solid black;

  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;  /*After setting a width this will make object sit centrally within parent container. Auto sets left and right                                  margins equally. 0 denotes no top or bottom margin */

}


 .li1 { 
border: 1px solid black;
display:inline-block;
margin-right: 15%;
float: left;

} 
.li2 { 
border: 1px solid black;
display:inline-block;
margin-right: 17%;
margin-left: 20%;
}
.li3 { 
border: 1px solid black;
display:inline-block;
float: right;
margin-right: 8%;
}
/* Adjust left/right margin as appropriate */

#navBar {
  border: 1px solid black;
  width:553px;
  margin: 0 auto;
}

您的html：

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

如何在div的內聯鏈接之間平均分配空間？

問題描述

4 個解決方案

解決方案1
2 2016-03-04 18:35:29

解決方案2
1 2016-03-04 18:42:01

解決方案3
1

解決方案4
0 2016-03-04 20:27:42

嗨xD

您的CSS：

您的html：

如何在div的內聯鏈接之間平均分配空間？

問題描述

4 個解決方案

解決方案1 2 2016-03-04 18:35:29

解決方案2 1 2016-03-04 18:42:01

解決方案3 1

解決方案4 0 2016-03-04 20:27:42

嗨xD

您的CSS：

您的html：

解決方案1
2 2016-03-04 18:35:29

解決方案2
1 2016-03-04 18:42:01

解決方案3
1

解決方案4
0 2016-03-04 20:27:42