25

<legend>aを a 内のタイトルとして使用しようとしてい<fieldset>ます。

IE 以外のブラウザでは、<legend>は の上端に配置され<fieldset>、テキストは行の中央に完全に配置されます。

代替テキスト

他の要素と同じように位置をリセットしようとしています。すなわち<h3>。

これが私がこれまでに持っているCSSです。

fieldset legend {
    margin: 0;
    padding: 0;
    position: static;
    border: 0;
    top: auto; left: auto;
    float: none;
    display: block;
    font-size: 14px;
    line-height: 18px;
}

しかし、伝説はまだ完全にラインの中心にあります.

はい、margin/padding/top 座標を追加できますが、ブラウザにこのレイアウトをトリガーする要素のデフォルト値があるかどうかを知りたいです。次に、これらの値をオーバーライドしたいと思います。

Firefox (3.6.10)、Chrome (6.0.472.63)、Safari (5.0.2) でテスト済み

更新 誰かが<legend>要素のスタイルを設定できた場合に備えて、この質問はもう 1 週間開いたままにします。解決策が見つからない場合は、@jnpcl の回答を受け入れます。

4

6 に答える 6

34

これで十分です：

 form legend{
    float: left;
    width: 100%;
 }
于 2013-12-20T13:47:08.317 に答える
9

https://web.archive.org/web/20140209061351/http://tjkdesign.com/articles/how_to_position_the_legend_element.asp

簡単に言えば、すべてのブラウザで LEGEND 要素を Fieldset に配置することはできません。

回避策: からのテキストを で折り返してから<legend>、 の<span>位置を変更し<span>ます。

于 2010-10-19T23:10:44.383 に答える
2

私はちょうど<legend>それらに を与えposition: absolute; top: -25px;、親<fieldset>に を与えてスタイルを整えましたposition: relative; padding-top: 30px;

于 2011-04-20T15:30:54.793 に答える
0

仕様によると、凡例は「レンダリングされた凡例」のみですfloat: none。

これは、次のことを意味します。

<fieldset>
    <legend style='float: left'> Heading </legend>
    <div class='clearfix'></div>
    <!-- Your form elements here -->
</fieldset>

これにより、凡例は通常の (フローティングの場合) 要素のように動作します。

注: clearfixBootstrap の clearfix クラスは次のとおりです。

.clearfix::after {
    clear: both;
}
.clearfix::before, .clearfix::after {
    display: table;
    content: " ";
}

（同様の回答がすでに投稿されていますが、これにはclearfixトリックと、これがランダムではなく、信頼できる指定された動作であることを示す仕様への参照は含まれていません。）

于 2021-04-23T12:59:42.827 に答える