使用 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

我不太明白，你只想对齐复选框还是蓝色文本

要将复选框左对齐，请更改

 input {
        width: 15%;
    }

至

input[type="text"] {
    width: 15%;
}

Answer 2

添加一个元素来包围输入并使它们达到所需的大小：

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

并添加CSS进行格式化：

span.spacer {
    display: inline-block;
    width: 15%;
}

Answer 3

不是在所有输入字段上设置 width，而是用 div 用 class。在我的示例中 .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>

Answer 4

您可以将文本左对齐的输入驱动程序

input
{
text-align: left;
width: 15%;

}

但是标签 span can not be proque 是一个在线元素，更多疑问请阅读这个讨论 span 标签的网站： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

您还可以将跨度包含在 div 中并以某种方式实现对齐

使用 CSS 左对齐文本

Left Align of Text using CSS

css

text-alignment