在h1元素旁边显示内嵌HTML元素时的最佳做法是什么？ [英] Best practice when displaying inline HTML elements next to a h1 element?

问题描述

我有一个网页显示产品的名称，在同一行旁边有编辑/删除链接。示例：

产品1 （编辑|删除）

名称具有大的字体大小，并且编辑/删除按钮具有规则的字体大小（即，与段落和其他内容相同）。我想让它们内联出现，就像上面的例子。我只是想知道应该利用什么HTML / CSS来实现这一点。

如果我使用h1元素的产品名称，它推动编辑/删除链接到下一行，因为h1是一个块元素。所以我可以在我的CSS中重写h1，并使 display：inline ，但是混乱的h1的自然外观似乎是反对最佳做法（？）。 p>

另一种选择是根本不使用h1元素，并使用几个内联div或跨度。但不使用h1元素的网页的顶级标题似乎会违反最佳做法的东西......它还需要我明确设置字体大小，这意味着我不能使用默认字体大小的h1和p元素，我在网站的其余部分使用。

在这种情况下最好的方法是什么？

解决方案

使用包装器 div 为 h1 并且浮动可能会对您有所帮助。

这是您要寻找的？ ： http://jsfiddle.net/Pt2BZ/

I have a webpage that displays the name of a "product", with edit/delete links next to it on the same line. Example:

Product 1 (Edit | Delete)

I want the product name to have a large font size, and the edit/delete buttons to have regular font size (i.e. same as paragraphs and whatnot). And I want them to appear inline, like the example above. I'm just wondering what HTML/CSS I should utilise in order to achieve this.

If I use a h1 element for the product name, it pushes the edit/delete links to the next line because h1 is a block element. So I could override h1 in my CSS and make display: inline, but messing with the natural appearance of h1 seems like something that would be against best practices (?).

The other option is to simply not use a h1 element at all and use a couple of inline divs or spans. But not using a h1 element for the top-level header of a webpage seems like something that would go against best practices too... It would also require me to explicitly set the font sizes, meaning I can't use the default font sizes of h1 and p elements, which I use throughout the rest of the website.

What's the best approach in this situation? I know it's sort of a simple/trivial question, but it would be nice to know anyway.

解决方案

Using wrapper div for the h1 and floating it might help you.

Is this what you are looking for? : http://jsfiddle.net/Pt2BZ/

这篇关于在h1元素旁边显示内嵌HTML元素时的最佳做法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！