Question

我正在写一篇博客文章，我想添加一个“注释”框，我希望看起来非常像<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元素可以使标记变得更好：）

Answer 1

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

<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找到替代解决方案，那么它将是解决难题的理想方式。

没有字段的HTML字段集

1 个答案: