-1
私は4つのテキストボックスをレンダリングするページを持っています。上位3つのテキストボックスはエンジン設定として論理的にグループ化する必要があります。したがって、私は<fieldset>
タグを使用してコントロールをグループ化しました。しかし、<fieldset>
は、<legend>
「エンジン設定」テキスト(以下のスクリーンショット)の下に水平線を表示しているようです。html fieldset要素が正しく機能しなかったのはなぜですか?
なぜ機能しなかったのだろうか?私はHTMLやスタイルのルール定義で何かを見逃しましたか?また、私はSOに関連する問題を見つけることができませんでした。私はHTMLとCSSの初心者ですので、私に同行してください。スニペット私は<fieldset>
要素のために定義したスタイル規則と私のページ内のHTML要素の
。
.hm-property {
margin-top: 10px;
}
.hm-fieldset {
margin-top: 12px;
width: 505px;
height: 175px;
}
.hm-legend {
font-size: 15px;
font-weight: normal;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #555;
}
<div class="hm-editorslist">
<label class="hm-fieldItemLabel">Heatmap Engine Editors:</label><select class="hm-fieldItemBig" id="hmeditorcbo"></select>
<div class="hm-EditorAdd glyphicon glyphicon-plus" id="btnNewHMEditor" title="Add New Heatmap Engine Editor"></div>
<div class="hm-EditorRemove glyphicon glyphicon-remove" id="btnDeleteHMEditor" title="Remove Selected Heatmap Engine Editor"></div>
<span class="alert-info pageAlertBox LoadHMTemplate-info" style="display:none;"><strong>Loading.....</strong></span>
<div>
<fieldset class="hm-fieldset">
<legend class="hm-legend">Engine Settings:</legend>
<!--Engine Destination Folder textbox-->
<div class="hm-property">
<label class="hm-fieldItemLabel">Destination Folder:</label><input type="text" class="hm-textboxes" id="hmEngineDestFolder" title="The relative destination path of engine" />
</div>
<!--Engine Integrity Refresh Rate textbox-->
<div class="hm-property">
<label class="hm-fieldItemLabel">Integrity Refresh Rate:</label><input type="text" class="hm-textboxes" id="hmEngineIntegrityRate" title="Engine's integrity refresh rate (in minutes)" />
</div>
<!--Engine Source Folder textbox-->
<div class="hm-property">
<label class="hm-fieldItemLabel">Source Folder Path:</label><input type="text" class="hm-textboxes" id="hmSourceFolder" title="The relative source path of engine" />
</div>
</fieldset>
</div>
<!--GUI File Location textbox-->
<div class="hm-property">
<label class="hm-fieldItemLabel">GUI File Location Path:</label><input type="text" class="hm-textboxes" id="hmGUIFileLoc" title="Relative folder path to the file" />
</div>
</div>
任意の助けを大幅に高く評価されています。ブートストラップが付属して
任意のスタイルシートを使用せずに、フィールドセットが正しく表示されます。提供されたCSSでテストされています。ページ内で使用している外部スタイルシートを知ることができますか? –
@Xufox、期待される結果は次のようになります。https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset Windowsフォームのグループボックスに似ています。問題は、それが表示されていないことです。 – Juniuz
@PhaniKumarMそれは私がそれについて考えたもので、 '