50

このようなタイトルのボックスを作成したいと思います。

タイトル付きのCSSボックス

これを行うためのデフォルトのCSSタグがあるかどうか教えてもらえますか？または、カスタムスタイルを作成する必要がありますか？

4

7 に答える 7

66

fieldsetCSS でスタイルを設定できる HTML タグを探していると思います。例えば、

    
    <fieldset style="border: 1px black solid">

      <legend style="border: 1px black solid;margin-left: 1em; padding: 0.2em 0.8em ">title</legend>

      Text within the box <br />
      Etc
    </fieldset>

于 2008-09-22T07:42:46.697 に答える
14

フォームで使用しておらず、代わりに編集不可のフォームで使用したい場合は、次のコードを使用してこれを行うことができます -

.title_box {
  border: #3c5a86 1px dotted;
}

.title_box #title {
  position: relative;
  top: -0.5em;
  margin-left: 1em;
  display: inline;
  background-color: white;
}

.title_box #content {}
<div class="title_box" id="bill_to">
  <div id="title">Bill To</div>
  <div id="content">
    Stuff goes here.<br> For example, a bill-to address
  </div>
</div>

于 2010-05-29T22:59:54.903 に答える
5

http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.htmlから

fieldset {
  border: 1px solid green
}

legend {
  padding: 0.2em 0.5em;
  border: 1px solid green;
  color: green;
  font-size: 90%;
  text-align: right;
}
<form>
  <fieldset>
    <legend>Subscription info</legend>
    <label for="name">Username:</label>
    <input type="text" name="name" id="name" />
    <br />
    <label for="mail">E-mail:</label>
    <input type="text" name="mail" id="mail" />
    <br />
    <label for="address">Address:</label>
    <input type="text" name="address" id="address" size="40" />
  </fieldset>
</form>

于 2008-09-22T07:44:14.353 に答える
3

これはあなたが望むものを与えるでしょう

<head>
    <title></title>
    <style type="text/css">
        legend {border:solid 1px;}
    </style>
</head>
<body>
    <fieldset>
        <legend>Test</legend>
        <br /><br />
    </fieldset>
</body>
于 2008-09-22T07:44:22.810 に答える
2

私の知る限り (間違っていたら訂正してください!)、ありません。

内側に負のマージン h1 を含む div を使用することをお勧めします。ドキュメントのセマンティック構造に応じて、デフォルトでおよそ次のように見える 1 つの凡例 (HTML) を持つフィールドセット (HTML) を使用することもできます。

于 2008-09-22T07:41:01.430 に答える
1

これを試すことができます。

<fieldset class="fldset-class">
    <legend class="legend-class">Your Personal Information</legend>

    <table>
        <tr>
            <td><label>Name</label></td>
            <td><input type='text' name='name'></td>
        </tr>
        <tr>
            <td><label>Address</label></td>
            <td><input type='text' name='Address'></td>
        </tr>
        <tr>
            <td><label>City</label></td>
            <td><input type='text' name='City'></td>
        </tr>
    </table>
</fieldset>

デモ

于 2015-08-28T08:43:37.033 に答える