为什么下拉菜单中的文本高于相邻 div 中的文本？
使用 Blueprint CSS，我在页面上创建了一个标题行。
我不明白的是为什么下拉菜单在行中的显示略高于其左侧 div 中的文本（敏捷的棕色狐狸跳过了懒狗）。
如果我将 prepend-top 类添加到下拉 div，下拉菜单将显示为略低于相邻 div 中的文本（敏捷的棕色狐狸跳过了懒狗） 。
如何让两个元素中的文本显示在行中的同一水平位置？
<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 中看到的，下拉列表的字体比下拉菜单的字体大得多。页面上的其余文本。
Using Blueprint CSS, I created a header row on my page.
What I don't understand is why the dropdown menu appears slightly higher in the row than the text in the div to the left of it (The quick brown fox jumped over the lazy dog).
If I add the prepend-top class to the dropdown div, the dropdown appears slightly lower than the text in the adjacent div (The quick brown fox jumped over the lazy dog).
How do I get the text in both elements to appear on the same horizontal level in the row?
<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;
}
As you can see from the CSS, the font for the dropdown is considerably larger than the font for the rest of the text on the page.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
当您使用简写 Font 属性并省略某些值时，这些值不会被继承，它们将重置为其“初始值”。
因此，在您的示例中，因为您没有在后代中定义行高，所以它被重置——它没有继承 18px。
http://www.w3.org/TR/CSS2/fonts.html #font-shorthand
由于您正在排列一个 Select 元素，该元素可能会出现一些其他问题，具体取决于您浏览的浏览器和平台，因为某些浏览器使用本机系统小部件来实现表单，这可能会更复杂一些元素。
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.