相對於行內塊div的文本定位

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的，inputblock並設置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; 
}