我试图控制下划线的粗细，但是，它似乎只是一条巨大的水平线，不符合文字。如何使文本以与文本相同的厚度加下划线：
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div class="title">test</div>
</body>
</html>
“border-bottom”样式正被添加到“div”标签中。因为通过defult'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>
你只需要在你的css或display:inline-block;元素中插入float;
你遇到的问题是你使用的是border，而不是下划线。边框延伸元素的整个长度，默认情况下，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' */
}
当然，鉴于您有效地希望下划线低于文本，并且可能用于“强调”文本（请参阅演示的问题，如果使用text is longer than the defined width定义的宽度），则更容易简单使用内联元素，例如span，而不是div，因为它的默认行为与您想要的行为相同。
如果使用em而不是px，则边框采用字体大小。
span {
font-size:5em;
border: solid black;
border-width:0 0 0.1em;
}
这是一个小提琴：Fiddle。
似乎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>
尝试添加：margin：auto。这应该根据文本的长度缩放行