Html 给 span 元素加下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10453362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Underlining a span element
提问by Dilip Shah
When I apply 'border-bottom' to a 'span' element to underline it and if that the 'span' has 'image' in it with 'vertical-align: middle', the border cuts across the image! Is there anyway to maintain 'vertical-align: middle' and still run the border below the 'span'?
当我将“border-bottom”应用于“span”元素以给它下划线时，如果“span”中有带有“vertical-align: middle”的“image”，则边框会穿过图像！无论如何要保持“垂直对齐：中间”并仍然在“跨度”下方运行边界？
<html>
<head>
<style type="text/css">
span.underline {
font-size: 20px;
border-bottom: 3px solid grey;
}
img.embeddedImage {
vertical-align: middle;
}
</style>
</head>
<body>
<span class="underline"> (a) <img class="embeddedImage" src="logo.gif"></span>
</body>
</html>
回答by j08691
Add display:block;to your span or turn the span into a div.
添加display:block;到您的跨度或将跨度变成一个 div。
Or...use display:inline-block;
或者...使用 display:inline-block;
回答by KBN
span.underline {
font-size: 20px;
text-decoration: underline;
}
回答by Umbrella
If just underlining the text isn't enough...
{text-decoration:underline;}
如果仅在文本下划线还不够...
{text-decoration:underline;}
If you set the image to have a higher z-index higher than the span, does it do what you need?
如果您将图像设置为比跨度更高的 z-index，它是否满足您的需求？
<style type="text/css">
span.underline {
font-size: 20px;
border-bottom: 3px solid grey;
z-index: 1;
}
img.embeddedImage {
vertical-align: middle;
z-index: 2;
}
</style>
