如何使用CSS将两个标题彼此相邻？

<h5>Category</h5><h6>auto</h6>

places Category and auto on separate lines, like this:

将Category和auto放在不同的行上,如下所示:

Category auto

3 个解决方案

#1

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-block is not supported in all browsers.

请注意,并非所有浏览器都支持内联块。

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.

你也可以浮动块元素,但这可能会成为一个棘手的问题,因为浮动可能相当复杂。坚持内联这样的案例。

#2

<h5 style="display:inline-block;">Category</h5>
<h6 style="display:inline-block;">auto</h6>

#3

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).

请注意浮动仅适用于块元素(因此使用这两种样式将不执行浮动,因为内联元素不能浮动)。

#1