Question

我想将一些复选框与标签对齐，使得复选框位于右侧的垂直行中，标签与左侧垂直行中的起始边对齐。

Answer 1

我相信这是你正在寻找的：

＆＃13;

label {
    display: inline-block;
    padding-left: 15px;
}

＆＃13;

<form>
    <div>
        <label>Label text</label><input type="checkbox" /> 
        <label>Label text</label><input type="checkbox" /> 
        <label>Label text</label><input type="checkbox" /> 
    </div>
<form>

＆＃13;

工作示例：JSFiddle

Answer 2

＆＃13;

.row {
  display: flex;
}
.row label { flex: 1; max-width: 25%; }

＆＃13;

<div class="container">
  <div class="row">
    <label>Label</label><input type="checkbox" />
  </div>
  <div class="row">
    <label>Label 2</label><input type="checkbox" />
  </div>
  <div class="row">
    <label>Label 3</label><input type="checkbox" />
  </div>
</div>

＆＃13;

Answer 3

Css文件：

.badgebox
{
    opacity: 0;
}

.badgebox + .badge
{
    /* Move the check mark away when unchecked */
    text-indent: -999999px;
    /* Makes the badge's width stay the same checked and unchecked */
    width: 27px;
}

.badgebox:focus + .badge
{
    /* Set something to make the badge looks focused */
    /* This really depends on the application, in my case it was: */

    /* Adding a light border */
    box-shadow: inset 0px 0px 5px;
    /* Taking the difference out of the padding */
}

.badgebox:checked + .badge
{
    /* Move the check mark back when checked */
    text-indent: 0;
}

HTML文件：

<div class="container">
    <div class="row text-center">
        <br>
        <br>
        <h1>Badgebox: CSS only checkbox badge!</h1>
        <h2>Works on Bootstrap 2.3.2 and up</h2>
        <br>
        <label for="default" class="btn btn-default">Default <input type="checkbox" id="default" class="badgebox"><span class="badge">&check;</span></label>
        <label for="primary" class="btn btn-primary">Primary <input type="checkbox" id="primary" class="badgebox"><span class="badge">&check;</span></label>
        <label for="info" class="btn btn-info">Info <input type="checkbox" id="info" class="badgebox"><span class="badge">&check;</span></label>
        <label for="success" class="btn btn-success">Success <input type="checkbox" id="success" class="badgebox"><span class="badge">&check;</span></label>
        <label for="warning" class="btn btn-warning">Warning <input type="checkbox" id="warning" class="badgebox"><span class="badge">&check;</span></label>
        <label for="danger" class="btn btn-danger">Danger <input type="checkbox" id="danger" class="badgebox"><span class="badge">&check;</span></label>
    </div>
</div>

或

参考此链接：

https://bootsnipp.com/snippets/featured/badgebox-css-checkbox-badge

对齐复选框CSS

3 个答案: