如何水平和垂直显示多个复选框css答案

【问题标题】：How to display multiple checkboxes both horizontally and vertically css如何水平和垂直显示多个复选框css
【发布时间】：2019-03-29 16:05:39
【问题描述】：

我正在尝试在水平和垂直方向上设置一组复选框，但它们的输出不一致。每个复选框的标签大小可以不同，例如复选框的一个标签显示“国际 Casaulty 条约”，而另一个仅显示 WIP。

我在这里查看了这个垂直示例。 http://jsfiddle.net/zcuLgbxt/

我如何才能整齐地排列它们，使它们在垂直和水平方向上都对齐？提前非常感谢！

这是我的简单 HTML/CSS

li {
    margin: 5px;
}

input {
    width: 20px;
    background-color: blue;
    position: relative;
    left: 200px;
    vertical-align: middle;
}

.vertical-list {
    width: 200px;
    position: relative;
    left: -20px;
    display: inline-block;
    vertical-align: middle;
}

li{
    list-style:none;
}

.horizontal-list{
    display: inline;
}

<center>    
  <ul>        
      <li>
          <input type="checkbox" >
          <label  class="vertical-list"> label1  label1  label1</label>
          <input type="checkbox"  >
          <label class="horizontal-list" for="myid2">label2</label>
      </li>
      <li>
          <input type="checkbox" >
          <label class="vertical-list" >label2label2label2</label>
          <input type="checkbox">
          <label class="horizontal-list" for="myid2">label2label2</label>

      </li>

      <li>
          <input type="checkbox"  >
          <label class="vertical-list" > label4  label4  label4</label>
          <input type="checkbox"  >
          <label class="horizontal-list" >label2</label>
      </li>
  </ul>
</center>

【问题讨论】：

右边或左边的复选框
哦，无论哪种方式都可以。无论文本标签的长度如何，我只需要将它们排列整齐。 #
你能把它分开，这样每个列表项只包含一个输入/标签，比如this吗？
我并没有真正了解您想要实现的目标，但请注意，您只能将 id 分配给一个元素。我看到 4 个 id 为“myid2”的元素。无论如何，如果您可以尝试更好地解释您想要实现的目标，也许我们可以帮助您
感谢空白。我稍微清理了代码。删除了“myid2”。我只想让复选框垂直和水平对齐，而不管标签长度。没有看到两者的任何例子，只有垂直或水平的复选框。

标签： html css checkbox vertical-alignment

【解决方案1】：

CSS 表格

li {
  margin: 5px;
  display: table-row;
}

li * {
  display: table-cell;
  padding: 0.5em;
}

input {
  background-color: blue;
  position: relative;
}

.vertical-list {}

li {
  list-style: none;
}

.horizontal-list {
  display: inline;
}

<ul>
  <li>
    <input type="checkbox">
    <label class="vertical-list"> label1  label1  label1</label>
    <input type="checkbox">
    <label class="horizontal-list" for="myid2">label2</label>
  </li>
  <li>
    <input type="checkbox">
    <label class="vertical-list">label2label2label2</label>
    <input type="checkbox">
    <label class="horizontal-list" for="myid2">label2label2</label>

  </li>

  <li>
    <input type="checkbox">
    <label class="vertical-list"> label4  label4  label4</label>
    <input type="checkbox">
    <label class="horizontal-list">label2</label>
  </li>
</ul>

【讨论】：

哇，谢谢保利。看起来很棒。正是我需要的。抱歉，如果我事先不清楚。非常感谢！