Question

看小提琴 http://jsfiddle.net/7qm6husL/

我已将line-height和height设置为<p>，所有内容都有相同的高度，<div>或<p>是inline-block }，我想知道他们为什么不在同一水平线上对齐，如何在没有table-cell的情况下修复它。

感谢。

所有代码：

<div class="wrapper">
    <div class="box red"></div><p>Something</p>
    <div class="box yellow"></div><p>hello</p>
    <div class="box blue"></div><p>world</p>
</div>

.wrapper {
    height: 40px;
}
.wrapper p {
    background: #EEE;
    display: inline-block;
    height: 40px;
    width: 90px;
    line-height: 40px;
}
.box {
    display: inline-block;
    width: 90px;
    height: 40px;
}

.red{background-color:#FFC2C2;}
.yellow{background-color:#FFB;}
.blue{background-color:#CEF0F5;}

Answer 1

将此添加到您的css：

.wrapper p {
    margin:0;
}
.box{
    vertical-align:top;
}

此外，由于您已将inline-block提供给div，请确保注释掉空格。

See updated fiddle here.

Answer 2

当您使用任何inline属性时，（ p在这种情况下），您有来定义其alignment }默认情况下不是top 因此，在这种情况下，在修改p到inline-block时，您还需要声明vertical-align。

对 css

进行以下更改

<强> FIDDLE

.wrapper p {
    background: #EEE;
    display: inline-block;
    height: 40px;
    width: 90px;
    line-height: 40px;
     margin:0;/**Add this**/
    vertical-align:top;/**Add this**/
}

Answer 3

请尝试这种风格：

.wrapper {
    height: 40px;
}
.wrapper p {
    background: #EEE;
    display: inline-block;
    height: 40px;
    width: 90px;
    line-height: 40px;

    margin:0;
    margin-left:5px;
    vertical-align:top;
}
.box {
    display: inline-block;
    width: 90px;
    height: 40px;
    margin:0;
    vertical-align:top;
}

.red{background-color:#FFC2C2;}
.yellow{background-color:#FFB;}
.blue{background-color:#CEF0F5;}

Answer 4

默认情况下，

p有边距和/或填充，因此您遇到p的问题。

.wrapper p {
    background: #EEE;
    display: inline-block;
    height: 40px;
    width: 90px;
    margin: 0; /* this fixes the key problem you were facing */
    padding: 0;
    vertical-align: top;

}

here is working fiddle

垂直对齐<p>“旁边”</p> <div> </div>

4 个答案: