8

このdisplayプロパティを使用すると、HTML 要素はスタイリングの観点から交換可能になります。fieldsetただし、これはandには当てはまらないようですlegend。

fieldset他の HTML 要素をandのようにスタイル設定することはできますlegendか?

4

4 に答える 4

4

これはかなりうまく機能しますが、背景が画像の場合、ie6 は少し奇妙な動作をします。条件付きコメントで修正できないものは何もありません。IE6-8、FF3.6、Safari 5、Chrome 5 でテスト済み

.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>
于 2010-07-18T03:26:17.820 に答える
3

前の答えは正しくありません。理由を知りたい場合は、これを試してください。

<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 だけでそれが可能だとは思いません。これは、fieldsetタグがレンダリングされる方法の一部にすぎません。

明確化: ブロックまたはインライン要素を配置して、それを含むブロック要素の可視境界線をまたいで、コンテナー要素の境界線がボックスの後ろで壊れるようにする方法を知りません。それが<legend>、含まれている<fieldset>要素の境界線に対して a が行うことです。

于 2010-07-17T10:35:32.730 に答える
2

たとえば、境界線を持つ 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>
于 2010-07-17T10:20:20.683 に答える
0

そこで、凡例タグのように見えるようにコードを修正しました (実際には凡例タグのように見えます)。

    <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>
于 2015-06-12T21:14:30.067 に答える