如何制作<；标签>；及<；输入>；是否显示在HTML表单的同一行上？_Html_Css_Forms

如何制作<；标签>；及<；输入>；是否显示在HTML表单的同一行上？

html css forms

如何制作<；标签>；及<；输入>；是否显示在HTML表单的同一行上？,html,css,forms,Html,Css,Forms,我正在创建一个网站的注册表格。我希望每个标签及其对应的输入元素显示在同一行上这是我的密码： #表单{ 背景色：#FFF；高度：600px；宽度：600px；右边距：自动；左边距：自动；边际上限：0px；边框左上半径：10px；边框右上角半径：10px；填充：0px； } 标签{ 字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；字号：18px；颜色：#333；高度：20px；宽度：200px；边缘顶部：10px；左边距：10px；文本对齐：右对齐；明确：

我正在创建一个网站的注册表格。我希望每个标签及其对应的输入元素显示在同一行上

这是我的密码：

#表单{
背景色：#FFF；
高度：600px；
宽度：600px；
右边距：自动；
左边距：自动；
边际上限：0px；
边框左上半径：10px；
边框右上角半径：10px；
填充：0px；
}
标签{
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
字号：18px；
颜色：#333；
高度：20px；
宽度：200px；
边缘顶部：10px；
左边距：10px；
文本对齐：右对齐；
明确：两者皆有；
}
输入{
高度：20px；
宽度：300px；
边框：1px实心#000；
边缘顶部：10px；
浮动：左；
}


姓名：
矩阵编号：
电邮：
用户名：
密码：

假设要浮动元素，也必须浮动

标签

元素

类似这样的方法会奏效：

label {
    /* Other styling... */
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}

#表单{
背景色：#FFF；
高度：600px；
宽度：600px；
右边距：自动；
左边距：自动；
边际上限：0px；
边框左上半径：10px；
边框右上角半径：10px；
填充：0px；
文本对齐：居中；
}
标签{
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
字号：18px；
颜色：#333；
高度：20px；
宽度：200px；
边缘顶部：10px；
左边距：10px；
文本对齐：右对齐；
明确：两者皆有；
浮动：左；
右边距：15px；
}
输入{
高度：20px；
宽度：300px；
边框：1px实心#000；
边缘顶部：10px；
浮动：左；
}
输入[类型=按钮]{
浮动：无；
}


姓名：
矩阵编号：
电邮：
用户名：
密码：

您缺少的是浮动：左；下面是一个刚刚在HTML中完成的示例

<div id="form">
<form action="" method="post" name="registration" class="register">
    <fieldset>
        <label for="Student" style="float: left">Name:</label>
        <input name="Student" />
        <label for="Matric_no" style="float: left">Matric number:</label>
        <input name="Matric_no" />
        <label for="Email" style="float: left">Email:</label>
        <input name="Email" />
        <label for="Username" style="float: left">Username:</label>
        <input name="Username" />
        <label for="Password" style="float: left">Password:</label>
        <input name="Password" type="password" />
        <input name="regbutton" type="button" class="button" value="Register" />
    </fieldset>
</form>


姓名：
矩阵编号：
电邮：
用户名：
密码：

更有效的方法是向标签添加一个类，并设置float:left；到CSS中的类

aaa##HTML 我建议您将它们包装在一个div中，因为您可能会在某些上下文中浮动它们

<div class="input-w">
    <label for="your-input">Your label</label>
    <input type="text" id="your-input" />
</div>

更新：2016年年中+首次移动媒体查询和flex box 这就是我现在做事的方式

HTML

另一个选项是在表单中放置表格。（见下文）我知道有些人不喜欢表格，但我认为当涉及到快速响应的表单布局时，它们工作得很好

<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<TABLE BORDER="1">
  <TR>
    <TD>Your name</TD>
    <TD>
      <INPUT TYPE="TEXT" NAME="name" SIZE="20">
    </TD>
  </TR>
  <TR>
    <TD>Your E-mail address</TD>
    <TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD>
  </TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"></P>
</FORM>


你的名字
您的电子邮件地址

除了像其他人所建议的那样使用浮动之外，您还可以依赖一个框架，例如，您可以使用“水平表单”类将标签和输入放在同一行上

如果您不熟悉引导，则需要包括：

头部的链接（顶部链接，上面写着<--最新编译和缩小的CSS-->），以及添加一些div：
div class=“表单组”
div class=“列-…”
以及每个标签中的class=“col-sm-2控制标签”，如引导程序所示，我将其包括在下面
我还重新设置了按钮的格式，使其与引导兼容
并在表单框中添加了一个图例，因为您使用的是字段集

这是非常直接的，您不必像上面列出的那样，为格式化而弄乱浮点或大量CSS

  <div id="form">
    <div class="row">
      <form action="" method="post" name="registration" class="register form-horizontal">
        <fieldset>
        <legend>Address Form</legend>

      <div class="form-group">
        <label for="Student" class="col-sm-2 control-label">Name:</label>
          <div class="col-sm-6">
            <input name="Student" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Matric_no" class="col-sm-2 control-label">Matric number: </label>
          <div class="col-sm-6">
            <input name="Matric_no" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Email" class="col-sm-2 control-label">Email: </label>
          <div class="col-sm-6">
            <input name="Email" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Username" class="col-sm-2 control-label">Username: </label>
          <div class="col-sm-6">
            <input name="Username" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Password" class="col-sm-2 control-label">Password: </label>
          <div class="col-sm-6">
            <input name="Password" type="password" class="form-control">
          </div>
      </div>

      <div>
        <button class="btn btn-info" name="regbutton" value="Register">Submit</button>
      </div>

      </fieldset>
    </form>
    </div>
  </div>
</div>


地址表
姓名：
矩阵编号：
电邮：
用户名：
密码：
提交

我已经用了几种不同的方法来实现这一点，但我发现唯一能使标签和相应的文本/输入数据保持在同一行，并始终完美地包装到父级宽度的方法是使用display:inline table

CSS

HTML


学生
电子邮件

#表单{
背景色：#FFF；
高度：600px；
宽度：600px；
右边距：自动；
左边距：自动；
边际上限：0px；
边框左上半径：10px；
边框右上角半径：10px；
填充：0px；
文本对齐：居中；
}
标签{
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
字号：18px；
颜色：#333；
高度：20px；
宽度：200px；
边缘顶部：10px；
左边距：10px；
文本对齐：右对齐；
右边距：15px；
浮动：左；
}
输入{
高度：20px；
宽度：300px；
边框：1px实心#000；
边缘顶部：10px；
}


姓名：
矩阵编号：
电邮：
用户名：
密码：

我发现

“display:flex”

样式是将这些元素放在同一行的好方法。不管div中的元素是什么类型的。特别是如果输入类是form-control，其他解决方案（如bootstrap、inline-block）将无法很好地工作

例如：

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
    <label for="Student">Name:</label>
    <input name="Student" />
</div>


姓名：

有关display:flex的更多详细信息：

弹性方向：行、列

<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"> <TABLE BORDER="1"> <TR> <TD>Your name</TD> <TD> <INPUT TYPE="TEXT" NAME="name" SIZE="20"> </TD> </TR> <TR> <TD>Your E-mail address</TD> <TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD> </TR> </TABLE> <P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"></P> </FORM>

<div id="form"> <div class="row"> <form action="" method="post" name="registration" class="register form-horizontal"> <fieldset> <legend>Address Form</legend> <div class="form-group"> <label for="Student" class="col-sm-2 control-label">Name:</label> <div class="col-sm-6"> <input name="Student" class="form-control"> </div> </div> <div class="form-group"> <label for="Matric_no" class="col-sm-2 control-label">Matric number: </label> <div class="col-sm-6"> <input name="Matric_no" class="form-control"> </div> </div> <div class="form-group"> <label for="Email" class="col-sm-2 control-label">Email: </label> <div class="col-sm-6"> <input name="Email" class="form-control"> </div> </div> <div class="form-group"> <label for="Username" class="col-sm-2 control-label">Username: </label> <div class="col-sm-6"> <input name="Username" class="form-control"> </div> </div> <div class="form-group"> <label for="Password" class="col-sm-2 control-label">Password: </label> <div class="col-sm-6"> <input name="Password" type="password" class="form-control"> </div> </div> <div> <button class="btn btn-info" name="regbutton" value="Register">Submit</button> </div> </fieldset> </form> </div> </div> </div>

.container { display: inline-table; padding-right: 14px; margin-top:5px; margin-bottom:5px; } .fieldName { display: table-cell; vertical-align: middle; padding-right: 4px; } .data { display: table-cell; }

<div class='container'> <div class='fieldName'> <label>Student</label> </div> <div class='data'> <input name="Student" /> </div> </div> <div class='container'> <div class='fieldName'> <label>Email</label> </div> <div class='data'> <input name="Email" /> </div> </div>

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center"> <label for="Student">Name:</label> <input name="Student" /> </div>

<div class ="row"> <div class="col-md-4">Name:</div> <div class="col-md-8"><input type="text"></div> </div>

<div class="form-group" style="display: flex"> <label>Topjava comment:</label> <input class="form-control" type="checkbox"/> </div>

<div class="form-group row"> <div class="col-md-2"> <label for="currentPassword">Current Password:</label> </div> <div class="col-md-6"> <input type="password" id="currentPassword"> </div> </div>