Question

我遇到了相对于右边的内联块div的文本定位问题。这是一个jsfiddle来说明这个问题。

这是演示HTML / CSS：

HTML

Select Date:
<div class="inputblock">
    <input type="radio" name="dateselect" value="0" />Todays Date<br />
    <input type="radio" name="dateselect" value="1" />Another Date
</div>

CSS

.inputblock {
    display:inline-block;
    background-color:#DDD;
}

我想要的是单选按钮块左侧的文字“选择日期”，位于右侧div的顶部，而不是底部。我怎样才能做到这一点？我是否必须将标签包装在div中？

对于这个问题，我将不胜感激。

Answer 1

使用vertical-align:top CSS属性，可以将所有内联元素的子项垂直放置在顶部。

因此，您的CSS需要一个额外的行：

.inputblock {
    display:inline-block;
    background-color:#DDD;
    vertical-align: top;
}

小提琴：http://jsfiddle.net/6CtT8/1/

Answer 2

如果你将标签和输入块都包装在一个div中，并在该div上设置vertical-align: top，你会得到你想要的东西：

<div style="vertical-align:top;">
    Select Date:
    <div class="inputblock">
        <input type="radio" name="dateselect" value="0" />Todays Date<br />
        <input type="radio" name="dateselect" value="1" />Another Date
    </div>
</div>

不确定使用负边距和相对定位是否有更好的方法。

编辑这也适用于Chrome浏览器：

.inputblock {
    display:inline-block;
    background-color:#DDD;
    vertical-align: top;
}

相对于内联块div的文本定位

2 个答案: