Question

我试图控制下划线的粗细，但是，它似乎只是一条巨大的水平线，不符合文字。如何使文本以与文本相同的厚度加下划线：

<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {

border-bottom: 2px solid red;

}
</style>
</head>
<body>
<div class="title">test</div>
</body>
</html>

Answer 1

“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>

Answer 2

您只需在css或display:inline-block;元素中插入float;

Answer 3

您遇到的问题是您使用的是border，而不是下划线。边框延伸了元素的整个长度，默认情况下div为width: 100%。

要进行更改，您应明确限制div的宽度，或使用float或更改其display。

使用width：

div {
    width: 10em; /* or whatever... */
}

JS Fiddle demo

使用float：

div {
    float: left; /* or 'right' */
}

JS Fiddle demo

使用display：

div {
    display: inline-block; /* or 'inline' */
}

JS Fiddle demo

当然，鉴于您有效地希望下划线低于文本，并且可能用于“强调”文本（请参阅演示的问题，如果text is longer than the defined width使用定义的宽度），简单地使用内联元素（比如span而不是div）更容易，因为它的默认行为与您想要的行为相同。

Answer 4

将您的div更改为span。

span适用于单行的短文本。

见这里：

Example

Answer 5

如果您使用em代替px，则边框采用字体大小。

span {
    font-size:5em;
    border: solid black;
    border-width:0 0 0.1em;
}

这是一个小提琴：Fiddle。

Answer 6

对于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>

Answer 7

尝试添加：边距：自动。这应该根据文本的长度缩放行

下划线的厚度

7 个答案: