代码之家 › 专栏 › 技术社区 › Hai Vu

使用CSS左对齐文本

text-alignment css

Hai Vu · 技术社区 · 6 年前

问题是,我有一个单页应用程序,其中我列出了一个表单:

Imgur

由于我的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>

如果我将输入字段设置为使控件具有相同的宽度,以便帮助文本对齐,则复选框将居中:

Imgur

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

input {
    width: 15%;
}

如何使控件和蓝色文本左对齐?

4 回复 | 直到 6 年前

Red 6 年前

而不是设置宽度在所有输入字段,换行符a div 用一个班 . 在我的例子中 .输入

现在您可以设置宽度在不影响 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>

Perette 6 年前

添加元素以环绕输入并使其达到所需大小:

<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%;
}

Enrico Lund 6 年前

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

要将复选框向左对齐,请更改

 input {
        width: 15%;
    }

到

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

Frank Núñez Rodríguez 6 年前

输入驱动程序可以将文本向左对齐,以便

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

}

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

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