样式不会将按钮与<div>块</div>对齐

Question

这是jsfiddle。

这假设是这样的：

但确实如此：

以下是该部分页面的HTML：

<input type="submit" name="BT_resetZoom" value="Reset coordinates" id="BT_resetZoom" tabindex="10" style="height:50px;width:125px;">
<div style="display: inline-block;"> 
    <span id="LBL_Xmin" class="labelsAxis">X :</span>
    <input name="TXT_graphXmin" id="TXT_graphXmin"
        tabindex="3" type="text" style="width:75px;">
    <span id="MainContent_LBL_Xmax"
        class="labelsAxis">to</span>
    <input name="TXT_graphXmax" id="TXT_graphXmax"
        tabindex="4" type="text" style="width:75px;">
    <br>
    <span id=LBL_Ymin" class="labelsAxis">Y :</span>
    <input name="TXT_graphYmin" id="TXT_graphYmin"
        tabindex="5" type="text" style="width:75px;">
    <span id="MainContent_LBL_YMax"
        class="labelsAxis">to</span>
    <input name="TXT_graphYmax" id="TXT_graphYmax"
        tabindex="6" type="text" style="width:75px;">
    <br>
    <br>
</div>

我试着摆弄高度，我试图用<div>标签包围按钮。什么都行不通。

如何使按钮与div对齐？

Answer 1

在您输入的CSS中添加vertical-align:top：

<input type="submit" name="ctl00$MainContent$BT_resetZoom" value="Reset coordinates" id="MainContent_BT_resetZoom" tabindex="10" style="height:50px;width:125px;vertical-align:top;">

<强> jsFiddle example

默认的垂直对齐方式是基线，这是给出原始输出的原因。

Answer 2

尝试定义float属性。

输入float:left

对于div float:right

Answer 3

您可以添加

display:block;
float:left;

到你的MainContent_BT_resetZoom

如果您不想使用float，请使用

vertical-align:top;

你的MainContent_BT_resetZoom