Question

我希望我的文字与多重选择框的顶部对齐，但默认为底部。我怎样才能做到这一点？我也想知道为什么它默认为底部，我认为将它放在顶部会更常见，即。描述选择框中内容的标签。

HTML：

<div>
    <label> 
        <span>Choose multiple options: </span> 
        <select name="options" multiple>
            <option value="all">ALL</option>
            <option value="option1">option1</option>
            <option value="option2">option2</option>
            <option value="option3">option3</option>
        </select>&nbsp;&nbsp;&nbsp; 
        <span>Choose file: </span> <input type="file"></input>
    </label>
</div>

FIDDLE

Answer 1

将此添加到您的CSS：

span, input {        
    vertical-align: top;
}

DEMO

Answer 2

摆脱标签上的display: block;以及li和标签的宽度，它可以正常工作。

ul {
  width: 100%;
  background-color: #ccc;
}

li {  
  padding-top: 6px;
  display: inline-block;
}

label {
  float: left;
  text-align: right;
}

Answer 3

首先在span中添加一个id，如下所示：

<span id="top">Choose multiple options: </span>

然后添加CSS：

#top{
    vertical-align: top;    
}

Answer 4

有一个CSS属性vertical-align: top;。

试试这个：

span, input{
  vertical-align: top;
}

Try in fiddle

Answer 5

您可以将表格用作以下内容

html：

<div>
    <table width="500" cellpadding="5" cellspacing="5">
        <tr>
            <td align="left" width="250" valign="top">
                &nbsp; <span>Choose multiple options: </span> 
            </td>
            <td align="left" width="250" valign="top">
            <select name="options" multiple="multiple">
                <option value="all">ALL</option>
                <option value="option1">option1</option>
                <option value="option2">option2</option>
                <option value="option3">option3</option>
            </select>
            </td>
        </tr>
        <tr>
            <td align="left" width="250" valign="top">
            &nbsp; <span>Choose file: </span> 
            </td>
            <td align="left" width="250" valign="top">
           <input type="file"></input>
           </td>
        </tr>
    </table>
</div>

表有aproperty valign =“top”它会帮助你

将文本与选择框的顶部对齐

5 个答案: