0

使用 Blueprint CSS，我在页面上创建了一个标题行。

我不明白为什么下拉菜单在该行中的显示略高于其左侧 div 中的文本（The quick brown fox jumped over the lazy dog）。

如果我将类添加到下拉 div 中，下拉列表会比相邻 div ( )prepend-top中的文本略低。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

当您使用速记 Font 属性并省略一些值时，这些值不会被继承，它们会重置为它们的“初始值”。

因此，在您的示例中，因为您没有在后代中定义行高，所以它被重置了——它没有继承 18px。

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

由于您正在排列一个 Select 元素，这可能也更复杂一点，这可能会有一些额外的问题，具体取决于您浏览的浏览器和平台，因为某些浏览器使用本机系统小部件作为表单元素。

于 2010-11-26T01:19:44.167 回答