使用CSS

Question

问题是，我有一个单页面应用程序，我在其中列出了一个表单：

由于我的新手CSS技能，我无法左对齐帮助文本（蓝色）。这是我的HTML代码：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

以下是我在CSS上面添加的内容：

input {
    width: 15%;
}

如何让控件和蓝色文本保持对齐？

Answer 1

不要在所有输入字段上设置 width ，而是用{em>类包围div。在我的示例 .input

中

现在，您可以设置字段的宽度，而不会影响input宽度。

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

添加CSS以格式化它：

{{1}}

Answer 3

我没有得到它，你只想对齐复选框或蓝色文字

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

LOOKUP(MAX(Fields!DateModified.Value), Fields!DateModified.Value, MAX(Fields!TimeModified.Value), "ShopOrders")

到

 input {
        width: 15%;
    }

Answer 4

输入驱动程序，您可以将文本对齐到左侧，以便

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

}

但标签跨度不能是proque是一个在线元素更加怀疑阅读此网站，讨论span标记： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

您还可以在div中包含span，并以某种方式实现对齐