显示：内联块未正确分配空间

Question

I am using five div in my footer content with equal dividing space. But it is going to the next line instead of showing in one line. Check my fiddle here 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;
 }

My Solution: If I add float:left property on divideFooter class and the bottom of the last div, adding one more div with clear:both property is working fine here.

But why the inline-block not working properly? Recent time many people are told like do not use float property, use inline-block property. So that i want to know the reason what is wrong my code?

Answer 1

Add font-size: 0 to your .mainFooterLinks class. With inline-blocks element, whitespace is added between them

Answer 2

It is because using inline-block considers line breaks as whitespace characters. You can overcome this issue by applying font-size=0 in the parent container, like this:

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

and then reset the font size in inner container ( .divideFooter in this case).

Answer 3

The reason it's happening is stated in the answers above..

A good solution you can use is this:

.mainFooterLinks {
     white-space:nowrap;
}

.divideFooter {
    white-space:normal;
}

This will get everything on the same line.. after that tweak your padding's to make everything fit ;]

EXAMPLE