Html 在标签中对齐字体

有没有办法改变

标签

中的文本属性，使其接触基线？在本例中，州和市都位于基线之上

HTML:

<div id="leftContent">
    <div id="state">
        <label for="state">State:</label>
        <select name="state">
            <option>State - Karnataka</option>
        </select>
    </div>
    <div id="city">
        <label for="city">City:</label>
        <select name="city">
            <option>City - Bangalore</option>
        </select>
    </div>
</div><!--leftContent-->

#state label, #city label{
    width:40%;
    display:inline-block;
    margin: 3px 0 3px 6px;
}

中的页边距顺序为右上下左。 所以，看起来您正在为右边距设置0px，而不是为底部边距设置0px。 试试这个：

margin: 3px 3px 0px 6px;

或：

---

不过，我可能会更好地探索

填充
css选项。
我将以下css应用于您的HTML片段：

label, select {
    font-family: arial;
    font-size: 2.0em;
    vertical-align: baseline; /* default value */
}
label {
    border: 1px solid gray;
    width:40%;
    display:inline-block;
    margin: 3px 0 3px 6px;
    text-align: right;
}

并得到如下结果：

标签中的文本和“选择”元素沿公共基线对齐，如果增大字体大小，这一点会更加明显

但是，您需要确保在
标签
和
选择
字段中使用相同的字体系列和字体大小，以获得相同的对齐方式。（在您的示例中，即使字体不同，这似乎不是问题。）

在您的示例中，文本沿同一基线对齐，两个框的底部也沿公共水平线对齐

但是，标签周围的框比选择组的框高，因此这可能是您试图解决的问题。
如果为
标签指定高度，则可以使用
行高来调整文本的位置：

#state label, #city label{
    width:40%;
    display:inline-block;
    border:1px solid #000000;
    margin: 3px 0 3px 6px;
    line-height: 28px;
    height: 20px;
    vertical-align: bottom;
}

这是我的建议

编辑：您可以添加

#state select, #city select {
    margin-bottom: 4px;
}

因此，选择框的位置也相同

这是更新的。
基线
是
垂直对齐
属性的默认值，如果没有任何意义，请尝试
垂直对齐：底部。
#state select, #city select {
    margin-bottom: 4px;
}