0

Blueprint CSS を使用して、ページにヘッダー行を作成しました。

私が理解していないのは、ドロップダウン メニューがその左側の div 内のテキストよりも行のわずかに上に表示される理由です ( The quick brown fox jumped over the lazy dog)。

クラスをドロップダウン divに追加するprepend-topと、ドロップダウンは隣接する div のテキストよりもわずかに低く表示されます ( The quick brown fox jumped over the lazy dog)。

両方の要素のテキストを行の同じ水平レベルに表示するにはどうすればよいですか?

    <div class="span-24 last">

        <div class="span-21">The quick brown fox jumped over the lazy dog</div>

        <div class="span-3 last">
            <select name="test" id="test">
                <option id="test1" value="test1" selected>test1</option>
                <option id="test2" value="test2" selected>test2</option>
                <option id="test3" value="test3" selected>test3</option>
            </select>
        </div>
    </div>

CSS:

body
{
    font:12px/18px 'Times New Roman',Times,serif;

}

#test
{
    font: 170% 'Times New Roman',Times,serif;
}

CSS からわかるように、ドロップダウンのフォントは、ページの残りのテキストのフォントよりもかなり大きくなっています。

4

1 に答える 1

1

When you use the shorthand Font property and you leave off some of the values, those values aren't inherited, they are reset to their "initial value".

So in your example because you didn't define a line height in your descendent, it was reset -- it did not inherit the 18px.

http://www.w3.org/TR/CSS2/fonts.html#font-shorthand

It's probably also complicated a little more by the fact that you are lining up a Select element which may have some additional issues depending on which browser and platform your browsing on because some browsers use native system widgets for form elements.

于 2010-11-26T01:19:44.167 に答える