2

我有一个带有下划线的标题，text-decoration: underline;唯一的问题是线条太细。我只想把下划线加粗。我考虑过使用border-bottom来执行此操作，但边框会延伸容器的整个宽度并且文本居中。不工作。

4

3 回答 3

5

<span>您可以使用标签包装文本，使用display: inline-block;，删除text-decoration: underline;属性并添加border-bottom: 2px solid #000;

演示

注意：为什么要使用inline-block？这样您还可以使用or控制 theborder和文本之间的间距，但如果您不需要 ，您可以像NullPoiиteя所说的那样简单地摆脱它。此外，请务必使用父元素上的类来选择特定对的特定标签。paddingmarginsdisplay: inline-block;spanelement.class

于 2013-07-02T04:58:45.690 回答
2

很久以前，text-underline-widthCSS3 Text Module CR 中有一个属性，定义为指定粗细。但是，它并没有在浏览器中实现，并且在 2005 版本的模块中被删除了。这间接表明在 CSS 中无法设置下划线宽度。

至于使用border-bottom而不是 a text-decoration: underline，它是一个不同的属性，具有不同的效果（边框基本上处于较低的位置），并且存在许多关于如何使其与文本一样窄的现有问题，这似乎是问题在这里。但最简单的方法是使用一些跨标题中文本的内联（文本级）标记，例如

<h1><u>Your heading text</u></h1>

与例如

u { text-decoration: none; border-bottom: 0.2em solid }

代替u，您可以使用例如span元素，但u即使在浏览器中禁用 CSS 样式时，它也具有产生至少一个简单下划线的优点。使用u，您当然需要关闭其默认下划线，以避免同时获得下划线和下边框。

于 2013-07-02T07:58:04.240 回答
0

试试这种风格

  <h1 style="border-bottom: 5px solid black">This is heading 1</h1>

演示

于 2013-07-02T05:03:35.850 回答