为什么html fieldset元素无法正常工作？

Question

我有一个呈现四个文本框的页面。前三个文本框应按逻辑分组为引擎设置。因此，我使用<fieldset>标记相应地对控件进行分组。但是，<fieldset>似乎在<legend>＆＃34;引擎设置＆＃34;下方显示了一条水平线。文字（下面的截图）。

我想知道它为什么不起作用？我错过了html或样式规则定义中的内容吗？另外，我在SO中找不到任何相关问题。我是HTML和CSS的新手，所以请耐心等待。

我页面中的html元素片段，其中包含我为<fieldset>元素定义的样式规则。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

非常感谢任何帮助。

Answer 1

如果包含boostrap，您可以将样式更改为以下内容：

＆＃13;

＆＃13;

pop

＆＃13;

＆＃13;

＆＃13;