9

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

产品 1（编辑 | 删除）

我希望产品名称具有大字体，并且编辑/删除按钮具有常规字体大小（即与段落等相同）。我希望它们显示为内联，就像上面的例子一样。我只是想知道我应该使用什么 HTML/CSS 来实现这一点。

如果我使用 h1 元素作为产品名称，它会将编辑/删除链接推送到下一行，因为 h1 是一个块元素。所以我可以在我的 CSS 和 make 中覆盖 h1 display: inline，但是弄乱 h1 的自然外观似乎违反了最佳实践（？）。

另一种选择是根本不使用 h1 元素并使用几个内联 div 或 span。但是不使用 h1 元素作为网页的顶级标题似乎也违背了最佳实践......它还需要我明确设置字体大小，这意味着我不能使用默认字体大小h1 和 p 元素，我在整个网站的其余部分都使用它们。

在这种情况下最好的方法是什么？我知道这是一个简单/微不足道的问题，但无论如何很高兴知道。

4

5 回答 5

4

是的，这些链接不属于您的<h1>. 一种方法是浮动标题，如下所示：

​&lt;h1>Title</h1>
<div class="tools"> <!-- perhaps use an unordered list here and not div -->
    <a href="#">Edit</a>
    <a href="#">Delete</a> <!-- use a form with POST to delete instead -->
</div>

h1 { float:left; }

http://jsfiddle.net/JeuXt/

显示部分（CSS）没有通用的最佳实践或方法，但您确实希望保持 HTML 干净并让所有内容在语义上正确。

于 2012-09-06T15:15:44.583 回答
2

使用包装器div和h1浮动它可能会对您有所帮助。

这是你想要的？：http: //jsfiddle.net/Pt2BZ/

于 2012-09-06T16:40:50.177 回答
-1

另一种选择是使用经常被忽视的display: run-in;风格。这将导致h1“运行”到紧邻的块级元素。

注意- 浏览器对此规则的支持可能仍然有点参差不齐，所以我一定会在生产环境中使用之前对其进行测试。

HTML

<h1>Page Title</h1>
<div class="links">
    ( <a href="#">Edit</a> | <a href="#">Delete</a> )
</div>​

CSS

h1 {     
    display: run-in;
    vertical-align: middle;
}

--- jsFiddle 演示 ---

于 2012-09-06T15:21:55.857 回答
-1

就我个人而言，我只是使用<span></span>带有 CSS 类的标签而不是标题标签来制作自定义类型的标题。由于标题标签展示了它们自己的默认行为，您将拥有更大的灵活性，并且您可能会发现自己对标题标签样式所做的任何更改都会开始影响您网站的其他部分。

编辑：这是 W3C 关于使用<H1>标签的想法的链接：链接

于 2012-09-06T15:22:05.187 回答
-2

我建议使用<h1>标签并将要缩小的元素包装在<span>. 然后在 span 上设置一个类并使用 CSS 定位它，例如：

HTML

<h1>Product 1 <span class="foo">(Edit | Delete)​​​​​&lt;/span></h1>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

​.foo {
    font-size: 10px;
}​

jsFiddle 示例

于 2012-09-06T15:13:17.467 回答