Html 如何使用 CSS 将两个标题并排放置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1294328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I place two headings next to each other using CSS?
提问by w35t
<h5>Category</h5><h6>auto</h6>
places Categoryand autoon separate lines, like this:
将Category和auto放在单独的行上，如下所示：
Category
类别
auto
汽车
How can I place them both on the same line, like this?
我怎样才能把它们放在同一条线上，像这样？
Category auto
类别汽车
回答by Rex M
h(n) elements are 'block' elements, which means they will grow to take all available horizontal space. This also means they will push anything "right" of them down to the next line.
h(n) 元素是“块”元素，这意味着它们将增长以占据所有可用的水平空间。这也意味着他们会将任何“正确”的东西推到下一行。
One easy way to accomplish this is to set their display to inline:
实现此目的的一种简单方法是将其显示设置为内联：
<style>
h5, h6 {display:inline;}
</style>
Note that inline-blockis notsupported in all browsers.
请注意，inline-block是不是在所有的浏览器都支持。
You can also float block elements, but that can become a sticky issue as floating can be fairly complex. Stick with inline for cases like this.
您也可以浮动块元素，但这可能会成为一个棘手的问题，因为浮动可能相当复杂。对于这种情况，坚持使用内联。
回答by w35t
<h5 style="display:inline-block;">Category</h5>
<h6 style="display:inline-block;">auto</h6>
回答by Gertjan
You must change the display mode of the elements. H tags are rendered as BLOCK elements by default. To override this behavior add the following style definitions to your website or CSS
您必须更改元素的显示模式。H 标签默认呈现为 BLOCK 元素。要覆盖此行为，请将以下样式定义添加到您的网站或 CSS
h5,h6 { display: inline; }
You can also decide to let them "float" next to each other you can do that via:
您还可以决定让它们“漂浮”在彼此旁边，您可以通过以下方式做到这一点：
h5,h6 { float: left; }
Please note that floating only works on block elements (so using both styles will perform no float because inline elements cannot float).
请注意浮动仅适用于块元素（因此使用两种样式将不会执行浮动，因为内联元素不能浮动）。
