代码之家 › 专栏 › 技术社区 › Jakob

任何HTML元素都可以设置为字段集/图例的样式吗?

legend fieldset css html

8

Jakob · 技术社区 · 14 年前

display fieldset legend 然而。

是否可以将其他HTML元素的样式设置为 字段集 和 传奇 ?

4 回复 | 直到 14 年前

1

3

Jesse Dhillon 14 年前

前面的答案不正确,如果您想知道为什么要尝试此选项:

<body style="background-color: #f00">
  <div style="border: 1px solid #000">
      <h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
  </div>
  <fieldset><legend>Foobar</legend></fieldset>
</body>

但是,没有办法让边界中断的影响 legend fieldset 的边界。我不相信这是可能的CSS单独,这只是一些东西,这是方式的一部分 字段集 标记已呈现。

澄清 :我不知道如何定位一个块或内联元素,使其跨过其包含块元素的可见边界,然后导致容器元素的边界在其框后面断开。真是个好主意 <legend> <fieldset> 元素。

2

4

joelpittet 14 年前

.fieldset {
    position: relative;
    border: 1px solid #000;
    margin: 20px;
    padding: 20px;
    text-align: left;
}

.fieldset .legend {
    background: #fff;
    height: 1px;
    position: absolute;
    top: -1px;
    padding: 0 20px;
    color: #000;
    overflow: visible;
}

.fieldset .legend span {
    top: -0.5em;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    overflow: visible;
}


   <div class="fieldset">
      <div class="legend">
         <span>This is the title</span>
      </div>
      Test
   </div>

3

2

Victor Welling 14 年前

当然,例如:一个带有边框的DIV元素和一个背景颜色集位于DIV边框上的子标题元素看起来就像一个字段集和图例。

非常基本的例子:

<div style="border: 1px solid #000">
    <h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>

4

0

Kitanga Nday 9 年前

所以我修改了代码,使它看起来有点像legend标签(它看起来真的像legend标签)。

    <div style="border: 2px groove #ccc">
    <h1 style="font-weight:normal; background: #fff; margin-top: -11px; margin-left: 10px; padding: 0 10px 0 0; width: 40px; height:20px; font-size:1em;">Foobar</h1>
</div>
  <fieldset><legend>Foobar</legend></fieldset>