我试图控制下划线的粗细，但是，它似乎只是一条不符合文本的巨大水平线。如何使文本下划线与文本的粗细相同：
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div class="title">test</div>
</body>
</html>
问问题
9420 次
7 回答
3
'border-bottom' 样式被添加到 'div' 标签中。因为默认'divs'设置为'display:block;' div 的宽度为 100%。要解决此问题，请在文本周围添加另一个标签并将类赋予该标签。
例如：<div><span class="title">test</span></div>
新代码：
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div><span class="title">test</span></div>
</body>
</html>
于 2012-11-28T19:29:44.933 回答
3
你只需要插入display:inline-block;你的css或float元素；
于 2012-11-28T19:35:57.533 回答
1
您遇到的问题是您使用的是border，而不是下划线。边框延伸了元素的全长，对于 a默认情况下div是这样。width: 100%
要改变它，你应该div明确限制宽度，或者使用float或改变它的display.
使用width：
div {
width: 10em; /* or whatever... */
}
使用float：
div {
float: left; /* or 'right' */
}
使用display：
div {
display: inline-block; /* or 'inline' */
}
当然，假设您实际上希望下划线位于文本下方，并且可能用于“下划线”文本（请参阅演示的问题，如果文本长于定义的宽度，则使用定义的宽度），它' 会更容易简单地使用内联元素，例如 a spanfor this 而不是 a div，因为它的默认行为与您想要的行为相同。
于 2012-11-28T19:28:36.173 回答
0
If you use em instead of px, the border adopts the font size.
span {
font-size:5em;
border: solid black;
border-width:0 0 0.1em;
}
Here is a fiddle: Fiddle.
于 2012-11-28T19:32:27.190 回答
0
似乎对于 IE7，只有一种方法可以使这项工作：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
border-bottom: 3px solid red;
display: inline;
}
</style>
</head>
<body>
<div><h1>Hello, world</h1></div>
</body>
</html>
于 2012-11-28T19:59:24.453 回答
0
于 2012-11-28T19:28:13.620 回答
0
尝试添加：边距：自动。这应该根据文本的长度缩放线条
于 2019-03-01T03:06:16.430 回答