Display:inline-block 没有正确分配空间答案

【问题标题】：Display:inline-block not allocating the space properlyDisplay:inline-block 没有正确分配空间
【发布时间】：2014-06-30 16:16:53
【问题描述】：

我在页脚内容中使用了五个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 属性，那么在这里再添加一个带有 clear:both 属性的 div 就可以了。

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

【问题讨论】：

当您使用display:inline-block 时，这些元素之间会出现一些whitespace - see this similar question
非常感谢 Vucko。

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案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）。

【讨论】：

【解决方案3】：

上面的答案中说明了它发生的原因..

您可以使用的一个很好的解决方案是：

.mainFooterLinks {
     white-space:nowrap;
}

.divideFooter {
    white-space:normal;
}

这将使所有内容都在同一行。然后调整您的填充以使所有内容都适合；]

EXAMPLE

【讨论】：