我从互联网上尝试了许多不同的方法,但到目前为止都没有奏效。 我想要的只是表单上的输入框要对齐,因为它们现在不在中心。 谢谢

<form style="text-align:center;">
    <p><label> First Name:
        <input name="fName" id="fName"type="text" required/>
    </label>*
    </p>

    <p><label> Last Name:
        <input name="lName"id="lName"type="text"/>
    </label> *
    </p>

    <p><label> Email:
        <input name="email"id="email"type="email"/>
    </label>*
    </p>


    <p><label> Username:
        <input name="username"id="username"type="text"/>
    </label>*
    </p>


    <p><label> Password:
        <input name="password1"id="password1"type="password"/>
    </label>*
    </p>


    <p><label> Re-enter Password:
        <input name="password2"id="password2"type="password"/>
    </label>*
    </p>
    </form>

#1楼 票数:0 已采纳

只需将文本向右对齐,然后将表格向左浮动:

style="text-align:right;float:left"

演示:

 <form style="text-align:right;float:left"> <p><label> First Name: <input name="fName" id="fName"type="text" required/> </label> &nbsp;&nbsp; </p> <p><label> Last Name: <input name="lName"id="lName"type="text"/> </label> &nbsp;&nbsp; </p> <p><label> Email: <input name="email"id="email"type="email"/> </label>* </p> <p><label> Username: <input name="username"id="username"type="text"/> </label>* </p> <p><label> Password: <input name="password1"id="password1"type="password"/> </label>* </p> <p><label> Re-enter Password: <input name="password2"id="password2"type="password"/> </label>* </p> </form> 

(也可以在某些地方移除星标,用&nbsp;&nbsp;代替以显示在不需要该字段的情况下该怎么做)

#2楼 票数:0

您正在将表格居中对齐,因此它的子元素将有些笨拙。 同样, <label>元素通常不会包围整个输入元素。 使用“ for”属性来匹配输入的ID。

您将需要使用一些CSS来稍微调整布局。 每个浏览器将处理略有不同的表单元素。

例如:

HTML

<form>
    <p>
        <label for="fName">First Name:</label>
        <input name="fName" id="fName" type="text" required/>
    </p>
    <p>
        <label for="lName">Last Name:</label>
        <input name="lName" id="lName" type="text" />
    </p>
</form>

CSS

form label {
    display: block;
}

的jsfiddle

根据您希望表单标签的外观(上方,内联等),您的CSS和容器元素可能需要更新。

编辑 这是一个旧的Site Point文章 ,它将帮助您获取所需的布局。

  ask by Jordan Skosnick translate from so

未解决问题?本站智能推荐:

3回复

表格对齐

我需要将两个表对齐在一起的帮助,例如:使列对齐。 第一个表具有标题,第二个表具有显示的行。 我在ruby上执行此操作,因此,我必须将结果放入另一个表中,因为否则更新将无法进行(将数据从父表中移开。)有没有办法,我可以同时拥有两个表对齐,因此每一行的数据与每个标题列对齐。 谢谢
4回复

如何对齐表格

我的网页上有一张桌子,它会自动向左对齐,文字在中心对齐,这正是我想要的,但是我无法使桌子与页面的中心对齐。 这是我的桌子的代码。
2回复

将表格彼此对齐

我有一个循环,根据数据库内容生成表。 换句话说,内容一直在变化。 当前,所有表格都在彼此下方对齐。 这使一个巨大的垂直滚动成为可能,如果表格可以彼此并排对齐,则可以节省很多空间。 我该怎么办? 这是表代码: 谢谢
1回复

在表格内对齐

好的,所以我的问题如下 - 我在一个表中工作,我有一个日期和时间列,我希望所有时间都保持对齐 - 当有 100 个实例时,它开始看起来非常混乱,就像在下面的例子,因为每次都从不同的地方开始。 我玩过 flex,但它使日期和时间在宽屏显示器上彼此远离,有什么想法吗? 2020 年 2 月 17 日上
2回复

表格对齐

我在以下表格中列出了酒店及其徽标的列表: http://ranchocordovaeventscenter.com/partner-hotels/ 所有徽标在左列,所有文本在右列。 我的问题是文本在徽标旁边的单元格顶部未对齐。 任何提示都会有所帮助。 这是我的一些代码:
2回复

将表格彼此对齐

我创建了两个带有引导程序4的表,它们一方面显示规格,另一方面显示收入统计信息。 我将两个表都放在col-xs-6 -class中,希望一个表左对齐,另一个表右对齐。 然而,当前的表在某种程度上避让对方。 请在下面的最低可行示例中找到: <link href="https:/
1回复

如何在表格内对齐表格?

我必须在一个表中创建一个简单的表。 我正在使用以下html代码制作简单的页面。 请复制并粘贴到文件中以正确理解问题。 主要问题是在表格的右侧,我有一些搜索信息,而左侧有一些优化搜索面板。 因此,当我的页面出现时,我的精简搜索窗口恰好位于中间。 我希望我桌子的左部分对准我开始的桌子。
1回复

表格表格对齐问题

我在StackOverflow和其他地方的几个不同位置看到了这个问题,我尝试了大约十二种不同的解决方案,从两个单独的表到一系列复杂的类,再到手动设置像素宽度。 他们每个人似乎都有以下问题之一。 一切都会滚动,什么也不会滚动,或者Header字段将与表的其余部分完全不对齐。 这里的上下文