顯示：內聯塊未正確分配空間

Question

我在頁腳內容中使用5個div ，且分隔空間相等。 但這將轉到下一行而不是顯示在一行中。 在http://jsfiddle.net/7ZAA6/中檢查我的小提琴。

的HTML

 <div class="mainFooterLinks">
<div class="divideFooter">
   <div class="fl_title">Test</div>
   <div class="fl_links">
       <ul>
          <li><a href="#">Solutions</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">DotNetNuke</a></li>
          <li><a href="#">Web Design & Development</a></li>
          <li><a href="#">EDC</a></li>
       </ul>
   </div>
</div>
<div class="divideFooter">
   <div class="fl_title">Test Sharepoint</div>
   <div class="fl_links">
       <ul>
          <li><a href="#">Services</a></li>
          <li><a href="#">Web Parts</a></li>
          <li><a href="#">Solutions</a></li>
          <li><a href="#">SharePoint Support</a></li>
       </ul>
   </div>
</div>
<div class="divideFooter">
   <div class="fl_title">Test CRM</div>
   <div class="fl_links">
       <ul>
          <li><a href="#">Products</a></li>
          <li><a href="#">Test Support</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Test CRM</a></li>
       </ul>
   </div>
</div>
<div class="divideFooter">
   <div class="fl_title">Test DNN</div>
   <div class="fl_links">
       <ul>
          <li><a href="#">Website Development</a></li>
          <li><a href="#">Skins</a></li>
          <li><a href="#">Modules</a></li>
          <li><a href="#">Support & Maintenance</a></li>
          <li><a href="#">EDC</a></li>
       </ul>
   </div>
</div>
<div class="divideFooter">
   <div class="fl_title">Test K12 DRM</div>
   <div class="fl_links">
       <ul>
          <li><a href="#">What is K12DRM?</a></li>
          <li><a href="#">K12DRM Features</a></li>
       </ul>
   </div>
</div>    

的CSS

 .mainFooterLinks
 {
  max-width:1200px;
  background-color:#333;
  padding:20px 0px 20px 0px;
  margin:0px auto;
  box-sizing:border-box;
 }
 .divideFooter
 {
 display:inline-block;
 width:20%;
 vertical-align:top;
 padding:0;
margin:0;  
}
.fl_title
{
font-family:Arial;
color:#cdcdcd;
font-size:15px;
font-weight:700;
padding-left:15px;
}
.fl_links a, .fl_links a:link, .fl_links a:active, .fl_links a:visited
 {
  font-family:Arial;
  color:#636363;
font-size:12px;
font-weight:400;
text-decoration:none;
 }
 .fl_links a:hover
 {
  text-decoration:underline;
 }
 .fl_links ul
 {
 list-style-type:none;
 list-style-image:url('fbull.jpg');
 padding:7px 10px 5px 30px;
 margin:0;
 }

我的解決方案：如果我在divideFooter類和最后一個div的底部添加float:left屬性，則在divideFooter添加一個帶有clear:both屬性的div可以正常工作。

但是為什么內聯塊無法正常工作？ 最近很多人被告知不要使用float屬性，而使用inline-block屬性。 這樣我想知道我的代碼出了什么問題的原因？

Answer 1

將font-size: 0添加到您的.mainFooterLinks類。 使用inline-blocks元素，在它們之間添加空格

Answer 2

這是因為使用inline-block將換行符視為whitespace字符。 您可以通過在父容器中應用font-size=0來克服此問題，如下所示：

.mainFooterLinks
{
    max-width:1200px;
    background-color:#333;
    padding:20px 0px 20px 0px;
    margin:0px auto;
    box-sizing:border-box;
    font-size: 0;
}

然后在內部容器（在這種情況下為.divideFooter中重置字體大小。

Answer 3

發生問題的原因已在上面的答案中說明。

您可以使用的一個好的解決方案是：

.mainFooterLinks {
     white-space:nowrap;
}

.divideFooter {
    white-space:normal;
}

這將使所有內容都在同一行上。在調整完填充內容以使所有內容都合適之后；]

例