3

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

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

border-bottom: 2px solid red;

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

7 回答 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... */
}

JS 小提琴演示。

使用float：

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

JS 小提琴演示。

使用display：

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

JS 小提琴演示。

当然，假设您实际上希望下划线位于文本下方，并且可能用于“下划线”文本（请参阅演示的问题，如果文本长于定义的宽度，则使用定义的宽度），它' 会更容易简单地使用内联元素，例如 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

将您的更改div为span.

span适用于单行的短文本。

看这里：

例子

于 2012-11-28T19:28:13.620 回答
0

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

于 2019-03-01T03:06:16.430 回答