html - 显示 :inline-block not allocating the space properly

Question

我在我的页脚内容中使用了五个 div，分隔空间相等。但它会转到下一行而不是显示在一行中。在这里查看我的 fiddle 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 属性，再添加一个 div clear:both 属性在这里工作正常。

但为什么行内 block 不能正常工作？最近很多人被告知不要使用 float 属性，使用 inline-block 属性。所以我想知道我的代码有什么问题的原因？

Answer 1

将 font-size: 0 添加到您的 .mainFooterLinks 类。使用 inline-blocks 元素，在它们之间添加空格