2017-09-21 10 views
-1

私は4つのテキストボックスをレンダリングするページを持っています。上位3つのテキストボックスはエンジン設定として論理的にグループ化する必要があります。したがって、私は<fieldset>タグを使用してコントロールをグループ化しました。しかし、<fieldset>は、<legend>「エンジン設定」テキスト(以下のスクリーンショット)の下に水平線を表示しているようです。html fieldset要素が正しく機能しなかったのはなぜですか?

なぜ機能しなかったのだろうか?私はHTMLやスタイルのルール定義で何かを見逃しましたか?また、私はSOに関連する問題を見つけることができませんでした。私はHTMLとCSSの初心者ですので、私に同行してください。スニペット私は<fieldset>要素のために定義したスタイル規則と私のページ内のHTML要素の

enter image description here

.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>

任意の助けを大幅に高く評価されています。ブートストラップが付属して

+0

任意のスタイルシートを使用せずに、フィールドセットが正しく表示されます。提供されたCSSでテストされています。ページ内で使用している外部スタイルシートを知ることができますか? –

+0

@Xufox、期待される結果は次のようになります。https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset Windowsフォームのグループボックスに似ています。問題は、それが表示されていないことです。 – Juniuz

+0

@PhaniKumarMそれは私がそれについて考えたもので、 '

'タグはスタイルルールなしでその周りに境界線で表示されるべきです。しかし、私の場合はそれをしませんでした。私が使用している他の外部スタイルシートはブートストラップのものです。 他のスタイルルールが '
'要素をオーバーライドしていると思います。 – Juniuz

答えて

0

、次のスタイルを変更することができます

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<style> 
 
\t .hm-property { 
 
\t \t margin-top: 10px; 
 
\t } 
 

 
\t .hm-fieldset { 
 
\t \t margin-top: 12px; 
 
\t \t width: 505px; 
 
\t \t height: 175px; 
 
\t \t border: 1px groove #ddd !important; 
 
\t \t padding: 0 10px 10px 10px !important; 
 
\t } 
 

 
\t .hm-legend { 
 
\t \t font-size: 15px; 
 
\t \t font-weight: normal; 
 
\t \t font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
\t \t font-size: 14px; 
 
\t \t color: #555; 
 
\t \t border-bottom: none; 
 
\t \t padding: 0 10px; 
 
\t \t width: auto; 
 
\t } 
 
</style> 
 

 
<div class="hm-editorslist"> 
 
\t <label class="hm-fieldItemLabel">Heatmap Engine Editors:</label> 
 
\t <select class="hm-fieldItemBig" id="hmeditorcbo"></select> 
 
\t <div class="hm-EditorAdd glyphicon glyphicon-plus" id="btnNewHMEditor" title="Add New Heatmap Engine Editor"></div> 
 
\t <div class="hm-EditorRemove glyphicon glyphicon-remove" id="btnDeleteHMEditor" title="Remove Selected Heatmap Engine Editor"></div> 
 
\t <span class="alert-info pageAlertBox LoadHMTemplate-info" style="display:none;"><strong>Loading.....</strong></span> 
 
\t <div> 
 
\t \t <fieldset class="hm-fieldset"> 
 
\t \t \t <legend class="hm-legend">Engine Settings:</legend> 
 
\t \t \t <!--Engine Destination Folder textbox--> 
 
\t \t \t <div class="hm-property"> 
 
\t \t \t \t <label class="hm-fieldItemLabel">Destination Folder:</label><input type="text" class="hm-textboxes" id="hmEngineDestFolder" 
 
\t \t \t \t \t title="The relative destination path of engine" /> 
 
\t \t \t </div> 
 

 
\t \t \t <!--Engine Integrity Refresh Rate textbox--> 
 
\t \t \t <div class="hm-property"> 
 
\t \t \t \t <label class="hm-fieldItemLabel">Integrity Refresh Rate:</label><input type="text" class="hm-textboxes" 
 
\t \t \t \t \t id="hmEngineIntegrityRate" title="Engine's integrity refresh rate (in minutes)" /> 
 
\t \t \t </div> 
 

 
\t \t \t <!--Engine Source Folder textbox--> 
 
\t \t \t <div class="hm-property"> 
 
\t \t \t \t <label class="hm-fieldItemLabel">Source Folder Path:</label><input type="text" class="hm-textboxes" id="hmSourceFolder" 
 
\t \t \t \t \t title="The relative source path of engine" /> 
 
\t \t \t </div> 
 
\t \t </fieldset> 
 
\t </div> 
 

 
\t <!--GUI File Location textbox--> 
 
\t <div class="hm-property"> 
 
\t \t <label class="hm-fieldItemLabel">GUI File Location Path:</label><input type="text" class="hm-textboxes" id="hmGUIFileLoc" 
 
\t \t \t title="Relative folder path to the file" /> 
 
\t </div> 
 
</div>

関連する問題