【问题标题】:How can I align input fields in css?如何对齐css中的输入字段?
【发布时间】:2015-04-18 16:19:48
【问题描述】:

这是我的表单应该如何显示的图像:http://i.imgur.com/myZOCqJ.jpg 我已经完成了所有工作,除了我无法在某些行之后将 * 显示为红色,以及如何水平对齐输入字段和中心的输入名称?

【问题讨论】:

  • 我相信这是一个简单的表,第一列设置(css)text-align:right;,第二列设置text-align:left;。没有任何代码,我无法进一步帮助你...... PS:我不敢相信你在没有代码的情况下获得了 3 个赞成票。
  • 我不想上传我的代码的原因是因为这是一个作业,我不希望我的程序中的任何人在谷歌上找到它并复制它哈哈,但基本上我需要把表格中的输入和输入名称对吗?
  • @kecer 从不使用表格进行布局。
  • @Rob:即使在创建....表时? Personal prefference
  • @kecer 这不是一张桌子。这是一个输入表单。请注意,您的链接来自六年前。这不是个人喜好问题。

标签: html css


【解决方案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; 

right-side 类设置一些宽度和

text-align:left;

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

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

并添加以下css类:

.redStar {
    color: red;
}

【讨论】:

  • @Rob 我想看看你的回答。
  • @user2154149 我提交这个是为了关闭所以我不会。
猜你喜欢
  • 2021-08-25
  • 1970-01-01
  • 2012-01-23
  • 1970-01-01
  • 2016-04-24
  • 2021-07-16
  • 1970-01-01
  • 1970-01-01
  • 2011-09-05
相关资源
最近更新 更多