Question

我正在尝试将checkbox与label文本对齐。 Here is my snapshot of webpage。

我正在使用一个复选框，该复选框仅在选中后才会显示下拉列表。

select {
  visibility: hidden;
}

input {
  margin-left: 5px;
  margin-top: 15px;
}

input[type=checkbox]:checked + select {
  visibility: visible;
}

<label>Applying for masters</label>
<input type="checkbox" value="yes" name="masters">

<select>
  <option>Select</option>
  <option>CS</option>
  <option>EC</option>
  <option>IT</option>
</select>

Answer 1

尝试以下方法。将您的复选框包装在一个div元素中，然后将CSS应用于该类。

设置样式vertical-align: middle

  <html>
    <head>
        <title></title>
        <style>
            select {
                visibility: hidden;
            }
    
            input {
                margin-left: 5px;
            }
                input[type=checkbox]:checked + select {
                visibility: visible;
            }
            /* new style to align check box */
            .checkboxes input {
                vertical-align: middle;
            }
    
        </style>
    </head>
    <body>
      <!-- new div tag to wrap all check boxes inside it -->
      <div class="checkboxes">
         <label for="masters">Applying for masters</label>
         <input type="checkbox" id="masters" value="yes" name="masters">
         <select>
            <option>Select</option>
            <option>CS</option>
            <option>EC</option>
            <option>IT</option>
         </select>
      </div>
    </body>
    </html>

复选框需要与标签对齐

1 个答案: