如何在不使用不良做法的情况下内联 H2 和 HR 标签？

Question

所以我想把一个HR和一个H2元素显示在同一行，这样看起来是这样的：

http://gyazo.com/7943d8d8b6d23ebffc80a60c0acc872f

但它看起来像这样：

http://gyazo.com/30f80e33d627e7bbedf56565afbd5509

这是代码：

hr {
display:inline-block;
width:60%;
float:right;
margin-right:20px;
height:5px;
background-color:#FFFFFF;
}

<h2 class="minecrafter" style="padding-left:10px;padding-top:10px;letter-spacing:3px;">Miners Union</h2> <hr>

现在我知道我可以通过在 H2 标签前面添加 HR 标签轻松解决这个问题，但我知道这是不好的做法，我认为它在 xHTML 中不起作用。

感谢您的阅读和任何回复:)

编辑以更正所指出的拼写错误

Answer 1

你可以像这样使用 :after 元素：fiddle

h2:after {
    content: '';
    display: inline-block;
    height: 3px;
    background: red;
    width: 60%;
    float: right;
    margin-top: 15px;
}

Answer 2

您可以通过将 css 更改为：

来完成此操作

hr, .minecrafter {
    display: inline-block;
}

hr {
    width: 60%;
}

希望对您有所帮助。

Answer 3

我会这样做：

<h2 class="minecrafter"><span>Miners Union</span><hr /></h2>

body {
    background: #444;
    color: #fff;
}
h2 {
    padding-left: 10px;
    padding-top: 10px;
    letter-spacing: 3px;
    overflow: hidden;
}
h2 span {
    float: left;
    margin-right: 20px;
}
h2 hr {
    border: 0;
    background: #fff;
    height: 4px;
}

:after 方法是 "cleaner" 方法，但是。

https://jsfiddle.net/0sh4a1wL/2/

如何在不使用不良做法的情况下内联 H2 和 HR 标签？

How can I have a H2 and a HR tag in-line without using bad practice?

html

css

inline

html-heading