Question

我想在这里将div中的一些文本对齐： HTML：

<div class="div1">
    <div class="div11">
        <img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px">
    </div>
    <div class="div12">
        <a href="">yo</a>
        </br>
        <a href="">yo</a>            
    </div>
</div>

CSS：

.div1 {
    height: 40px;
}

.div1 div {
    display: inline-block;
}

.div12 {
    padding-top: 5px;
}

的jsfiddle： http://jsfiddle.net/4mVPG/1/

我的div的高度是固定的，所以我想做的就是在最后一个div（.div12）上设置一个padding-top来向下移动文本。然而，当我添加一个填充顶部时，所有的盒子都被放下了。

为什么会发生这种情况？我该如何解决这个问题？感谢

Answer 1

当您使用inline-block时，每个块的行为就像在基线上得到（默认情况下）文本的文本一样。如果增加第二个块的高度，则基线会下降，第一个块也会下降。

您可以使用vertical-align: top来更改此内容。

Answer 2

用这个代替CSS：

.div1 {
    height: 40px;
}

.div1 > div {
    float: left;
}

.div12 {
    padding: 0 0 0 3px;
}

div1 div选择器也适用于所有后代，因此使用＆gt;仅适用于第一个。此外，如果容器高度固定，我认为使用浮动更好。

JSFidle

希望它有所帮助！

Answer 3

您可以使用＆＃34; .div1 div {display: inline-block;vertical-align: top;}＆＃34;并且不需要.div12 { margin-top: 30px; }，因为你想要在＆＃34;文本div＆＃34;

之上排列顶部并且没有额外空间

另外，为了更好的做法，请避免使用＆＃34; <br>＆＃34;标签，有很多＆＃34; Block＆＃34;标签，<div>, <p>等，如果有＆＃34;链接列表＆＃34;使用＆＃34; <ul><li>＆＃34;你可以用CSS控制边距和空格。

以下是更新后的代码：

<强> HTML

<div class="div1">
    <div class="div11">
        <img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px"/>
    </div>
    <div class="div12">
        <ul>
            <li><a href="">yo</a> 
            </li>
            <li> <a href="">yo</a> 
            </li>
        </ul>
    </div>
</div>

<强> CSS

.div1 {
    height: 40px;
}
.div1 div {
    display: inline-block;
    vertical-align: top;
}
.div12 ul,
.div12 li{
    margin:0;
    padding:0;
    list-style:none;
}

工作小提琴相同： http://jsfiddle.net/PK3UU/

希望这有用!!!

Answer 4

这是你想要的吗？ http://jsfiddle.net/4mVPG/4/我清理了一点css

div {
    height: 40px;
    display: inline-block;
    vertical-align:middle;
}

和html

<div class="div11">
    <img src="http://placekitten.com/40/40" alt="" width="40px" />
</div>
<div class="div12">
    <a href="">yo</a>
    <br />
    <a href="">yo</a>
</div>

CSS - div上的边距

4 个答案: