0

我正在尝试对齐表单的输入框，以便它们在页面上彼此对齐。我希望#FullNameText{text-align:15%;color:c0c0c0;}在 CSS 文档中使用以下元素

<p>
    <span Id="FullNameText">Full Name:</span>
    <input name="FullName" id="FullNameTab" autofocus="" onblur="fullNameCheck()" type="text">
</p>

text-align:15% 部分对页面没有影响。% 可以用来对齐吗？

4

4 回答 4

0

尝试这个：

#FullNameText { 
    width: 15%;
    color: #c0c0c0;
    display: inline-block;
}
于 2013-11-13T19:55:37.007 回答
0

无法将文本对齐到 %

text-align 只能左、右、居中、对齐、继承

更新： 您可以为#FullNameText 提供填充或边距

于 2013-11-13T19:56:24.550 回答
0

要将 a 中的元素关联在一起form，使用fieldset而不是段落，并将标签与 a 关联input，使用 a label（带有for属性），这允许单击label文本以聚焦该文本适用的元素：

<fieldset>
    <label for="fullNameTab" id="FullNameText">Full Name:</label>
    <input name="FullName" id="FullNameTab" autofocus="" onblur="fullNameCheck()" type="text">
</fieldset>

然后你可以在width或margin上指定label（就像你可以用 一样span，但这更语义化和有意义）：

label {
    display: inline-block; /* to allow a specified width to be defined */
    width: 15%; /* adjust to taste */
    margin: 0 5% 0 10%; /* 0 margin-top, 5% margin-left, 0 margin-bottom,
                           10% margin-left */
}

JS 小提琴演示。

于 2013-11-13T19:59:05.383 回答
0

不，您不能将 text-align 与 % 值一起使用。如果您想精确对齐输入框（可能与它们旁边的标签），您可以考虑使用浮动 div。

<div class="row">
<div class="left label">Full Name:</div>
<div class="left content"><input name="FullName" id="FullNameTab" autofocus="" onblur="fullNameCheck()" type="text"> </div>
<div style="clear: both"></div>
</div>

CSS：

.row {
  width: 100%;
}

.left {
  float: left; 
}

.label{
width:30%;
}

.content{
width:70%
}
于 2013-11-13T19:59:22.423 回答