Question

我将这个div夹在两个条形（其他div）之间，但是当我在方程式中添加文本时，div会重新定位。它的工作原理没有p元素及其子元素。这是演示该问题的小提琴：http://jsfiddle.net/57uSQ/

这是导致问题的HTML：

    <p>
        <span class="name">DOLCE & GABBANA</span>
        </br>
        <span class="title">THE ONE</span>
    </p>

相关的CSS：

.videoDesc {
    display: inline-block;

    border: 1px solid #000000;
    border-right: 0px;

    height: 200px;
    width: 500px;
}

.videoDesc p {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.videoDesc .name {
    display: inline-block;
    padding: 0px;
}

.videoDesc .title {
    display: inline-block;
    padding: 0px;
}

.title {
    font-family: Lekton;
    font-size: 1.25em;
}

.name {
    font-family: Oswald;
    font-weight: lighter;
    font-size: 2.5em;
    letter-spacing: 10px;
    padding-left: 5px;
}

Answer 1

您需要将vertical-align:top添加到.videoDesc：

.videoDesc {
    display: inline-block;
    border: 1px solid #000000;
    border-right: 0px;
    height: 200px;
    width: 500px;
    vertical-align:top;
}

<强> jsFiddle example

默认的垂直对齐方式是基线，这会导致您看到的行为。

我的<p> </p>标签正在影响我的div的位置。为什么是这样？

1 个答案: