html - ラベルのフォントを揃える

Question

labelベースラインに触れるように内部の text プロパティを変更する方法はありますか? この例では、State と City の両方がベースラインを上回っています。

http://jsfiddle.net/6VzLR/

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-->

CSS:

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

Answer 1

CSS margin プロパティのマージンの順序は、右上-左です。したがって、下マージンではなく右マージンに 0px を設定しているようです。これを試して：

margin: 3px 3px 0px 6px;

または：

margin-bottom: 0px;

paddingただし、個人的には css オプションを検討したほうがよいでしょう。

Answer 2

次の 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;
}

次の結果が得られました: http://jsfiddle.net/audetwebdesign/3CQbq/

ラベル内のテキストと選択要素は、共通のベースラインに沿って配置されます。これは、フォント サイズを大きくするとより明確になります。

labelただし、同じ配置を得るには、とselectフィールドの両方で同じフォント ファミリとフォント サイズが使用されていることを確認する必要があります。(あなたの例では、フォントが異なっていても、これは問題ではないようです。)

あなたの例では、テキストは同じベースラインに沿って配置され、2 つのボックスの下部も共通の水平線に沿って配置されます。

ただし、ラベルの周りのボックスは選択グループのボックスよりも高くなっているため、修正しようとしている可能性があります。

Answer 3

の高さを指定すると、labelを使用line-heightしてテキストの位置を調整できます。

#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;
}

これがJSFiddleです。

編集：追加できます

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

したがって、選択ボックスも同じように配置されます。

これが更新されたJSFiddleです。