Question

我正试图为我的网站制作一个页脚。

我想在这个页脚中内嵌2个div和一个列表。但那并没有发生。我使用css CSS属性display:inline-block。会发生什么事情div已经对齐，但list元素只是稍微向下移动。

以下是jsFiddle链接：http://jsfiddle.net/tw2Wp/2/。如果您看到JSfiddle，那么类footerContents的三个div不会在线对齐。

有人可以解释一下为什么会这样吗？使用inline-block来做这件事是对的还是有更好的方法（我确定有）？

Answer 1

请将vertical-align添加到.footerContents：

.footerContents {
    display: inline-block;
    width: 200px;
    height: 200px;
    padding: 5px;
    margin-top: 30px;
    margin-left: 50px;
    margin-bottom: 5px;
    background-color: red;
    vertical-align: top; /* <<< */
}

Demo

Answer 2

你会使用css3 flexbox模块，如下所示：

HTML

<div id="footer">
    <div class="footerContents">
       ...
     </div>

     <ul class="footerContents">
        ...
     </ul>

     <div class="footerContents">
        ...
     </div>
</div>
<div>Copyright © </div>

CSS

#footer {
  height:auto;
  width:100%;
  background-color:#666;
  background-image:url(footer_shade.png);
  background-repeat:no-repeat;
  background-position:50% 0;
  border-top:1px solid #FFF;
  color:#fff;
  font-family:'Bree Serif',serif;
  font-size:16px;
  line-height:20px;

  display:-moz-box;
  display:-webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: justify; 
  -moz-box-pack: justify; 
  -ms-flex-pack: justify; 
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.footerContents {
  width:200px;
  height: 200px;
  padding:5px;
  margin-top: 30px;
  margin: 20px;
  margin-bottom: 5px;
  background-color: red;

  -moz-flex-box:1;
  -webkit-flex-box:1;
  -ms-flex:1 1 200px;
  -webkit-flex: 1 1 200px;
  flex:1 1 200px;
}

请查看demo。以及一些关于flexbox的内容，如果您想知道，请点击here和here。

Answer 3

解决方案是浮动元素而不是使用inline-block，请参阅此处的工作示例：http://jsfiddle.net/tw2Wp/2/

请注意，我还添加了一个带有clear类的额外div，它将清除浮点数。通过这样做，您的背景将再次出现。由于浮动元素，父div不知道它应该有多大（所以它的高度为0）。

.clear{
    clear:both;
}

Answer 4

你可以这样做：

HTML

<div id="footer">
    <div class="footerContents">
       ...
     </div>

     <ul class="footerContents">
        ...
     </ul>

     <div class="footerContents">
        ...
     </div>
</div>
<div>Copyright © </div>

CSS

#footer {
  height:auto;
  width:100%;
  background-color:#666;
  background-image:url(footer_shade.png);
  background-repeat:no-repeat;
  background-position:50% 0;
  border-top:1px solid #FFF;
  color:#fff;
  font-family:'Bree Serif',serif;
  font-size:16px;
  line-height:20px;
  **white-space: nowrap;**
}

.footerContents {
  display:inline-block;
  width:200px;
  height: 200px;
  padding:5px;
  margin-top: 30px;
  margin-left: 50px;
  margin-bottom: 5px;
  background-color: red;
  **vertical-align: top;
  white-space: normal;**
}

请查看新的demo。

无法在线对齐元素

4 个答案:

HTML

CSS

HTML

CSS