1

我正在写一篇博客文章，我想添加一个“注释”框，我希望它看起来非常像<fieldset>一个<legend>

<fieldset>
    <legend>Note</legend>
    Please take note of this.
</fieldset>

（见http://www.w3schools.com/tags/tag_fieldset.asp）

如您所见，这<fieldset>实际上不包含任何字段，因此为了使布局更容易工作，这似乎有点肮脏。

有谁知道是否有另一个类似于<fieldset>\的标签<legend>更适用于它将包含的文本内容？

我可以用 CSS 做到这一点，但我只是想知道是否有一个 HTML 元素可以使标记变得更好:)

4

1 回答 1

2

从语义的角度来看，标签的选择不应该由所需的表示（您希望它看起来像什么）来决定，而是要描述内容实际是什么。另一方面，没有什么表现得非常相似legend（这是一个相当奇怪的元素），所以确实没有可靠的选择，但你可以接近。这是许多可能的解决方案中的一个示例：

<div>
    <h3>Notes</h3>
    <p>Lorem Ipsum is simply dummy text...</p>
</div>

div {
    padding:20px;
    border:1px solid #ccc;
}
h3 {
    margin-top:-30px; /* estimated, you can be more accurate */
    background:#fff;  /* hide the top border behind it */
    float:left;       /* make it the smallest width possible */
}

我不认为拥有没有表单输入的字段集在技术上是非法的（也就是说，您的标记仍将有效），但它实际上是用于表单的。如果您可以通过 CSS 找到替代解决方案，那将是解决难题的理想方法。

于 2013-03-09T16:20:38.950 回答