css - 使用 CSS 左对齐文本

Question

这是问题所在，我有一个单页应用程序，我在其中布置了一个表单:

由于我的 CSS 新手，我无法左对齐帮助文本(蓝色)。这是我的 HTML 代码:

label {
  width: 15%;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
}

span.short_help {
  font-size: 70%;
  color: cornflowerblue;
  padding-left: 10px;
}

<form>
  <div>
    <label for="Authentication">Authentication:</label>
    <input type="text" name="Authentication" id="-Authentication" />
    <span class="short_help">Authentication type, I, II, or III</span>
  </div>
  <br/>
  <div>
    <label for="Branch">Branch:</label>
    <input type="text" name="Branch" id="Branch" />
    <span class="short_help">Which regional branch.</span>
  </div>
  <br/>
  <div>
    <label for="Persistent">Persistent:</label>
    <input type="checkbox" name="Persistent" id="Persistent" />
    <span class="short_help">Persistent connection</span>
  </div>
  <br/>
</form>

如果我修复输入字段使控件具有相同的宽度以便帮助文本对齐，那么复选框将居中:

这是我在上面的 CSS 中添加的内容:

input {
    width: 15%;
}

如何让控件和蓝色文本都左对齐？

Answer 1

与其在所有输入 字段上设置宽度，不如用类 包裹一个div。在我的示例中 .input

现在您可以在不影响input 宽度的情况下设置字段的宽度。

* {
  box-sizing: border-box;
}

form {
  max-width: 600px;
}

label, .input, span {
  display: inline-block;
  vertical-align: middle;
  margin-left: -4px;
}

label {
  width: 20%;
}

.input {
  width: 30%;
}

span {
  color: cornflowerblue;
}

<form>
    <div>
        <label for="Authentication">Authentication:</label>
        <div class="input">
          <input type="text" name="Authentication" id="-Authentication" />
        </div>
        <span class="short_help">Authentication type, I, II, or III</span>
    </div>
    <br/>
    <div>
        <label for="Branch">Branch:</label>
        <div class="input">
          <input type="text" name="Branch" id="Branch" />
        </div>
        <span class="short_help">Which regional branch.</span>
    </div>
    <br/>
    <div>
        <label for="Persistent">Persistent:</label>
        <div class="input">
          <input type="checkbox" name="Persistent" id="Persistent" />
        </div>
        <span class="short_help">Persistent connection</span>
    </div>
    <br/>
</form>