对齐选择和输入形式

时间:2018-07-17 17:51:53

标签: css html5 forms display

我想对齐输入并选择,但是当我在CSS中使用Display:table-column属性时,它并没有真正的用处。

    <div class="other-
        <!-- fourth question -->info">

        <p class="q-4"> <label> Things that should be improved in the future (Check all that apply):</label> 
        <div class="q-4">
            <input type="checkbox">Front-end Projects <br>
            <input type="checkbox">Back-end Projects <br>
            <input type="checkbox">Data Visualization<br>
            <input type="checkbox">Challenges<br>
            <input type="checkbox">Open Source Community<br>
            <input type="checkbox">Gitter help rooms<br>
        </div>  </p>
        <!-- end fourth question -->

        <br>

还有我在CSS中的代码:

label{
  display: inline-block;
  float: left;
  width: 250px;
  text-align: right;
}

form input,
  form select {
  display: table-column;
  margin-left: 50px;
}

1 个答案:

答案 0 :(得分:0)

这是您要实现的目标吗? Output

<div class="other-
            <!-- fourth question -->info">

            <p class="q-4"> <label> Things that should be improved in the future (Check all that apply):</label> 
            </p><div class="q-4" style="display: inline-block;">
                <input type="checkbox">Front-end Projects <br>
                <input type="checkbox">Back-end Projects <br>
                <input type="checkbox">Data Visualization<br>
                <input type="checkbox">Challenges<br>
                <input type="checkbox">Open Source Community<br>
                <input type="checkbox">Gitter help rooms<br>
            </div>  <p></p>
            <!-- end fourth question -->

            <br>

    </div>