调整输入复选框的填充和垂直对齐按钮

Question

我尝试将输入复选框与右侧的按钮垂直对齐。

以下是我得到的一个例子：

如您所见，左侧的2复选框未对齐（与按钮相比有点太高），其按钮位于右侧（第一个输入为“播放器计算机”，第二个输入为“Player1 Player2”）

更新：

Minal Chauhan给出的解决方案是完美的。此致

Answer 1

请执行以下CSS更改。

首先从button-group类中删除填充。

.btn-group{
    padding-top: 0px;
}

然后使用CSS3解决方案display:flex。像这样。

form label{
    display:flex;
    align-items:center;
}

Answer 2

只需从button-group课程中删除填充。并在复选框中添加vertical-align: middle; and display: inline-block;并将以下css添加到您的代码中：

#formGame {
  padding-left: 0;
  pointer-events: all;
}
#formGame input[type="checkbox"] {
  vertical-align: middle;
  display: inline-block;
}
label {
  padding-left: 3px;
}
.btn-group{
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
button.btn {
  padding-left: 10px;
}

.btn-classic {
  color: black;
  background-color: white;
}

.btn-inverse {
  color: white;
  background-color: black;
}

#Player1VsPlayer2 {
  margin-top: 10px;
  margin-left: 12px;
}

#PlayerVsComputer {
  margin-top: 15px;
  margin-left: 12px;
}

#PlayableHits {
  margin-top: 10px;
  margin-left: 32px;
}

<form id="formGame">
   <div id="PlayerVsComputer" class="checkbox">
    <label><input type="checkbox" class="game" style=""/>
     <div class="btn-group" role="group">
      <button type="button" class="btn btn-inverse btn-xs"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player</font></font></button>
      <button type="button" class="btn btn-classic btn-xs"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Computer</font></font></button>
     </div>
    </label>
   </div>
   <div id="Player1VsPlayer2" class="checkbox">
    <label><input type="checkbox" class="game">
     <div class="btn-group" role="group">
      <button type="button" class="btn btn-inverse btn-xs" disabled=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player 1</font></font></button>
      <button type="button" class="btn btn-classic btn-xs" disabled=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player 2</font></font></button>
     </div>
    </label>
   </div>
</form>

Answer 3

另一种方式是

替换

<input type="checkbox" class="game">

到

<span class="btn-group"><input type="checkbox" class="game"></span>

Answer 4

1。通过将vertical-align应用于复选框 input元素，可以实现预期的行为，例如：

input.game {
    vertical-align: middle;
}

2. 必须删除在嵌套padding-top元素上声明的.btn-group属性，例如：

#formGame .btn-group {
    padding-top: 0px;
}

3。而是通过在包含margin元素上声明label属性来替代兄弟元素之间的间距，例如：

#formGame label {
    margin-bottom: 10px;
}

注意：使用表单元素（#formGame）的唯一ID属性作为公共元素（label）或框架类的基本选择器（ .btn-group）我们可以确保这些更改仅适用于预期的元素。

Answer 5

删除填充和边距属性，改为使用vertical-align。

Answer 6

您添加了一些不必要的CSS来解决问题。这将有助于您获得您正在寻找的内容，并且它也适用于旧浏览器。

.btn-group {
    padding-top: 0;
    vertical-align: text-bottom;
}

/* Get rid of vertical align on elements inside button */
button font {
    vertical-align: initial !important;
}

/* Restore whitespace removed by padding-top: 0 */
form#formGame > div {
    margin-top: 10px;
    margin-bottom: 10px;
}