html - 出现在 Fieldset 上的未知 CSS

Question

我最难设计这个字段集。它似乎在挑选我没有放在上面的随机样式。在昆虫中显示了一个随机边距，并将标签推到了一个新行。此外，它的中心对齐，我找不到任何告诉它这样做的代码。
https://sidecoinc.com/contact/
我附上了代码，但这似乎不是问题。
我试图让它看起来正常。选中旁边带有标签并左对齐的复选框。

      <fieldset for="MSM_custom_Interests">      
        <legend>What do you need help with?</legend>      
        <input type="checkbox" class="custom_input" name="MSM_custom_JamesHardie" value="True">James Hardie<br>
        <input type="checkbox" class="custom_input" name="MSM_custom_MarvinWindowsDoors" value="True">Marvin Windows & Doors<br>  
        <input type="checkbox" class="custom_input" name="MSM_custom_TimberTech" value="True">TimberTech<br>
        <input type="checkbox" class="custom_input" name="MSM_custom_MoistureManagement" value="True">Moisture Management info<br>   
        <input type="checkbox" class="custom_input" name="MSM_custom_OutdoorLiving" value="True">Outdoor Living Options<br>     
        <input type="checkbox" class="custom_input" name="MSM_custom_Everything" value="True">Everything<br>
        <input type="checkbox" class="custom_input" name="MSM_custom_Other" value="True">Other<br> 
     </fieldset>  


#marketsharpmFieldSet input.custom_input {
  width: auto;
  height: auto;
}
#marketsharpmFormDiv input {
  border-spacing: 0px;
  margin: 0px;
  padding: 0px;
  space: 0px;
  display: block;
}
#marketsharpmFieldSet input {
  width: 100%;
  height: 32px;
}

Answer 1

问题在于输入上的显示块 - 即强制输入为全宽，因此标签被推到下一行。
更改显示:块 - 到 display: inline-block .... 请注意，这会将复选框和标签带到同一行 - 但是您在某处设置了以内容为中心的样式，因此需要解决。我还建议在复选框右侧添加一个边距(或在标签左侧添加边距)以将它们隔开一点。

#marketsharpmFormDiv input {
  border-spacing: 0px;
  margin: 0px;
  padding: 0px;
  space: 0px;
  display: inline-block; // /changes this line
}

将块更改为内联块的效果: