Question

我有这个div：

<div id="footer" class="footer">
   <div class="footer-container">
     <p>Hello World</p> |
     <span id="select-language" class="label label-info">
         some text
     </span>
    </div>
</div>

如何将footer内的所有标记对齐在一行？我试过这个：

.footer-container
{
    margin: 20px 0;
    padding-right: 15px;
    padding-left: 15px;
    display: inline-block;
}

Answer 1

使用代码最简单的方法是使用asterix作为选择器来选择页脚内的所有元素，并为它们提供AG_446337835.1 example1 grgsdt AAHG AG_448352465.1 example2 190197 POKJ YUNIP AG_449465753.1 example3 h837h8 JUJN AG_449366462.1 example4 d34tw4 AG_444725037.1 example5 f45ge4 DFRF AG_441227463.1 example6 f3fw4t YUNIP AG_449986090.1 example7 gft7r4 NNHN AG_445666926.1 example8 4vsr55 GHGF AG_441004541.1 example9 fh893b YUNIP AG_444837264.1 example0 k3883d YUNIP样式（在显示属性仅赋予页脚容器之前））：

display: inline-block

.footer-container {
  margin: 20px 0;
  padding-right: 15px;
  padding-left: 15px;
}
.footer-container * {
  display: inline-block;
}

Answer 2

应在display: inline-block内的元素上添加

.footer-container。

.footer-container {
  padding-right: 15px;
  padding-left: 15px;
  margin: 20px 0;
}
.footer-container p {
  margin: 0;
}
.footer-container p,
.footer-container span {
  display: inline-block;
  vertical-align: top;
}

<div id="footer" class="footer">
   <div class="footer-container">
     <p>Hello World</p> |
     <span id="select-language" class="label label-info">
         some text
     </span>
    </div>
</div>

Answer 3

使用display:inline-block：

.footer-container
{
    margin: 20px 0;
    padding-right: 15px;
    padding-left: 15px;
    display: inline-block;
}
.footer-container p,
.footer-container span{
  display: inline-block;
}

<div id="footer" class="footer">
   <div class="footer-container">
     <p>Hello World</p> |
     <span id="select-language" class="label label-info">
         some text
     </span>
    </div>
</div>

如何将所有div内容对齐在一行？

3 个答案: