时间戳

首页 > 解决方案 > 如何使我的复选框在表单中对齐？

html - 如何使我的复选框在表单中对齐？

问题描述

我有一个问题.. 我有一个带有 3 个复选框和一个文本字段的 div，所以基本上是一个表单。表单居中，但现在复选框也都居中对齐，看起来不太好。有谁知道，我怎样才能使它们彼此低于？

<div class="forms" align=center>
  <form action="/sendmail.php" method="post">
    <p><input type="checkbox" name="xy" value="xy"> xy </p>    
    <p><input type="checkbox" name="zy" value="zy"> zy </p>
    <p><input type="checkbox" name="XS" value="XS"> XS </p>  
    <p>Extra: <textarea name="extra" cols="30" rows="7" wrap="wrap"></textarea></p>
    <input type="submit">
    <input type="reset">
  </form>
</div>

标签： htmlcssforms

解决方案

将复选框包装在 div 中。在我的代码片段示例中，它们包含在一个带有 class 的 div 中.wrapper。然后我使用 CSS 属性width: min-content;使该 div 的宽度仅与最大的内容行一样宽。但是，这将导致不需要的断词行为，该行为由white-space: nowrap;. 最后但并非最不重要的一点是，我给它一个text-align: left;，因为复选框在左侧。这样，它们在彼此下方对齐，因为它们与 div 的左侧对齐。

.wrapper {
  width: min-content;
  white-space: nowrap;
  text-align: left;
}
<div class="forms" align=center>
  <form action="/sendmail.php" method="post">
    <div class="wrapper">
      <p><input type="checkbox" name="xy" value="xy"> xy </p>    
      <p><input type="checkbox" name="zy" value="zy"> zy </p>
      <p><input type="checkbox" name="XS" value="XS"> XS </p>
    </div>
    <p>Extra: <textarea name="extra" cols="30" rows="7" wrap="wrap"></textarea></p>
    <input type="submit">
    <input type="reset">
  </form>
</div>

推荐阅读