html - 如何对齐 css 中的输入字段？

Question

这是我应该如何使我的表单看起来像的图像:http://i.imgur.com/myZOCqJ.jpg我已经完成了所有工作，只是我无法让 * 在某些行后显示为红色，而且我如何才能水平对齐输入字段和居中的输入名称？

Answer 1

您可以只使用前面提到的表格，也可以这样做:

            <div>
                <!-- container for one row, ie the 'First Name' label and its text input box -->
                <div class="row">
                    <!-- the label (ie 'First Name') has its own div and the Name text box has its own div. Doing this makes it possible to left align the labels properly and align the text boxes properly -->
                    <div class="left-side"><p>First Name:</p></div>
                    <div class="right-side"><p><input type="text" class="textbox"/></p></div>
                </div>
                <div class="row">
                    <div class="left-side"><p>Last Name:<p></div>
                    <div class="right-side"><p><input type="email"  class="textbox"/></p></div>
                </div>
                <div class="row">
                    <div class="left-side"><p>Student ID:<p></div>
                    <div class="right-side"><p><input type="text"  class="textbox"/></p></div>
                </div>
            </div>

整个表单依此类推。

然后在你的 css 中为 left-side 类设置一些宽度和

text-align: right; 

并为右侧类设置一些宽度和

text-align:left;

对于每个文本框后的红色*，尝试将此代码放在每个文本输入框后:

<span class="redStar">*<span>

并添加以下 css 类:

.redStar {
    color: red;
}