Question

我在页脚内容中使用了五个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;
 }

我的解决方案：如果我在float:left类和最后一个div的底部添加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;
}

这将使所有内容都在同一行...之后调整你的填充以使一切都合适;]

EXAMPLE

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

3 个答案: