如何使<label>和<input>出现在HTML表单的同一行上
我在一个项目上工作，我正在尝试为网站创build一个registry单。 我希望标签及其相应的文本/input区域出现在同一行上。 我已经尝试了很多方法，很less或无济于事。 请你能以正确的方式帮我解决这个问题，因为我不想通过反复试验来得到正确的答案。 这是我的代码
HTML
<div id="form"> <form action="" method="post" name="registration" class="register"> <fieldset> <label for="Student"> Name: </label> <input name="Student" /> <label for="Matric_no"> Matric number: </label> <input name="Matric_no" /> <label for="Email"> Email: </label> <input name="Email" /> <label for="Username"> Username: </label> <input name="Username" /> <label for="Password"> Password: </label> <input name="Password" type="password" /> <input name="regbutton" type="button" class="button" value="Register" /> </fieldset> </form> </div> CSS
#form { background-color: #FFF; height: 600px; width: 600px; margin-right: auto; margin-left: auto; margin-top: 0px; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 0px; } label { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; color: #333; height: 20px; width: 200px; margin-top: 10px; margin-left: 10px; text-align: right; clear: both; } input { height: 20px; width: 300px; border: 1px solid #000; margin-top: 10px; float: left; }
假设你想浮动元素，你也必须浮动label元素。
像这样的东西会工作..
label { /* Other styling.. */ text-align: right; clear: both; float:left; margin-right:15px; }
#form { background-color: #FFF; height: 600px; width: 600px; margin-right: auto; margin-left: auto; margin-top: 0px; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 0px; text-align:center; } label { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; color: #333; height: 20px; width: 200px; margin-top: 10px; margin-left: 10px; text-align: right; clear: both; float:left; margin-right:15px; } input { height: 20px; width: 300px; border: 1px solid #000; margin-top: 10px; float: left; } input[type=button] { float:none; }
<div id="form"> <form action="" method="post" name="registration" class="register"> <fieldset> <label for="Student">Name:</label> <input name="Student" /> <label for="Matric_no">Matric number:</label> <input name="Matric_no" /> <label for="Email">Email:</label> <input name="Email" /> <label for="Username">Username:</label> <input name="Username" /> <label for="Password">Password:</label> <input name="Password" type="password" /> <input name="regbutton" type="button" class="button" value="Register" /> </fieldset> </form> </div>
HTML
我build议你把它们包装在一个div中，因为你可能最终将它们放在特定的环境中。
<div class="input-w"> <label for="your-input">Your label</label> <input type="text" id="your-input" /> </div>
CSS
然后在这个div内，你可以使每一块inline-block以便您可以使用vertical-align来居中它们或设置基线等（您的标签和input可能会改变尺寸在未来…
.input-w label, .input-w input { float: none; /* if you had floats before? otherwise inline-block will behave differently */ display: inline-block; vertical-align: middle; }
的jsfiddle
更新：2016年中期+移动第一媒体查询和弹性盒
这就是我最近做事的方式。
HTML
<label class='input-w' for='this-input-name'> <span class='label'>Your label</span> <input class='input' type='text' id='this-input-name' placeholder='hello'> </label> <label class='input-w' for='this-other-input-name'> <span class='label'>Your label</span> <input class='input' type='text' id='this-other-input-name' placeholder='again'> </label>
SCSS
html { // https://www.paulirish.com/2012/box-sizing-border-box-ftw/ box-sizing: border-box; *, *:before, *:after { box-sizing: inherit; } } // if you don't already reset your box-model, read about it .input-w { display: block; width: 100%; // should be contained by a form or something margin-bottom: 1rem; @media (min-width: 500px) { display: flex; flex-directio3: row; align-items: center; } .label, .input { display: block; width: 100%; border: 1px solid rgba(0,0,0,.1); @media (min-width: 500px) { width: auto; display: flex; } } .label { font-size: 13px; @media (min-width: 500px) { /* margin-right: 1rem; */ min-width: 100px; // maybe to match many? } } .input { padding: .5rem; font-size: 16px; @media (min-width: 500px) { flex-grow: 1; max-width: 450px; // arbitrary } } }
的jsfiddle
你错过的是浮法：左边; 这里是刚刚在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中的类
除了像其他人所build议的那样使用浮点数外，还可以使用像Bootstrap这样的框架，您可以使用“水平格式”类将标签和input放在同一行上。
如果您不熟悉Bootstrap，则需要包含以下内容：
- 头部链接到引导CSS 的链接（顶部链接，它表示< – 最新编译和缩小的CSS – >） ，以及添加一些div：
- div class =“form-group”
- div class =“col -…”
- 以及每个标签中的class =“col-sm-2 control-label” ，如Bootstrap所示。
- 我也重新格式化了你的button，所以它符合Bootstrap。
- 并在您的表单框中添加了一个图例，因为您使用的是字段集。
这是非常简单的，你不会像上面列出的那样，用浮游物或大量的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>
我已经完成了几种不同的方法，但是我发现将标签和相应的文本/input数据保留在同一行上的唯一方式，并始终完全按照父级的宽度进行包装，即使用display：inline table。
CSS
.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; }
HTML
<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>
#form { background-color: #FFF; height: 600px; width: 600px; margin-right: auto; margin-left: auto; margin-top: 0px; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 0px; text-align:center; } label { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; color: #333; height: 20px; width: 200px; margin-top: 10px; margin-left: 10px; text-align: right; margin-right:15px; float:left; } input { height: 20px; width: 300px; border: 1px solid #000; margin-top: 10px; }
<div id="form"> <form action="" method="post" name="registration" class="register"> <fieldset> <div class="form-group"> <label for="Student">Name:</label> <input name="Student" /> </div> <div class="form-group"> <label for="Matric_no">Matric number:</label> <input name="Matric_no" /> </div> <div class="form-group"> <label for="Email">Email:</label> <input name="Email" /> </div> <div class="form-group"> <label for="Username">Username:</label> <input name="Username" /> </div> <div class="form-group"> <label for="Password">Password:</label> <input name="Password" type="password" /> </div> <input name="regbutton" type="button" class="button" value="Register" /> </fieldset> </form> </div>
另一种select是在表格内放置一个表格。 （见下文）我知道桌子被一些人所诟病，但是我认为它们在响应式表单布局方面效果很好。
<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>
