Question

我有这个标准情况：

<h1>Title</h1>
<h2>Subtitle</h2>
<p>Text</p>

现在，我用h1和h2设计了一个带有una下划线效果的底边框

border-bottom: 1px dashed #999999;

然而，这很好看，因为h1和h2在所有宽度上延伸，下划线效果超过了文本。我尝试用display来解决：inline-block;但这仅适用于某些页面，而在其他页面上（标题或副标题较短），两个标题行彼此相邻

我知道我可以通过在标题中添加一个span来解决这个问题，但我想知道是否有任何漂亮的css解决方案可以避免在html中插入额外的元素（并重写许多页面）。

提前谢谢。

亲切的问候！

Answer 1

Nifty CSS是的，但正如您在下面的评论中所述，如果您希望支持IE7，则没有CSS解决方案。

Demo Fiddle

你可以这样做，例如

h1{ display:inline; }
h1:after { content:"\A"; white-space:pre; }

这将在元素之后添加换行符。

Answer 2

虽然可以使用float:left或display:inline-block产生效果，但两者都会带来更多问题。

将HTML更改为此更容易：

<h1><span>Title</span></h1>

然后你的CSS：

h1>span {border-bottom: 1px dashed #999}

这将导致边框仅显示文本的宽度。

Answer 3

Use <u> tag explained below

<!DOCTYPE html>
    <html>
    <body>

    <p>This is a <u>parragraph mb mbmnbkjkjnkj </u>.</p>

    </body>
    </html>

只需在你的css中写下这个

u {    
    border-bottom: 1px dashed #000;
    text-decoration: none;
}

Answer 4

您可以通过调整内容大小并避免换行来完成此操作。因此保持IE7友好

.wrapper h1{
    margin-left:10px;
    border-bottom:1px solid black;
    width:300px;
    text-align:center;
    white-space:nowrap;
 }

请参阅 DEMO HERE