Как отобразить несколько флажков как по горизонтали, так и по вертикали css

#html #css #checkbox #vertical-alignment

#HTML #css #флажок #выравнивание по вертикали

Вопрос:

Я пытаюсь установить набор флажков как по горизонтали, так и по вертикали, но они не отображаются равномерно. Метки для каждого флажка могут различаться по размеру, например, на одном ярлыке для флажка написано «International Casaulty Treaty», тогда как на другом написано только 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>

1. флажки справа или слева

2. О, любой способ подходит. Мне просто нужно аккуратно расположить их независимо от длины текстовых меток. #

3. Можете ли вы разделить его так, чтобы каждый элемент списка содержал только один ввод / метку, подобную этому ?

4. Я действительно не понял, чего вы пытаетесь достичь, но имейте в виду, что вы можете присвоить идентификатор только одному элементу. Я вижу 4 элемента с идентификатором «myid2». В любом случае, если бы вы могли попытаться лучше объяснить, чего вы хотите достичь, возможно, мы сможем вам помочь

5. Спасибо, пусто. Я немного почистил код. Удален «myid2». Я бы просто хотел, чтобы флажки были выровнены как по вертикали, так и по горизонтали, независимо от длины метки. Не видел ни одного примера обоих, только вертикальный или один горизонтальный для флажков.

Ответ №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>