为啥我的 CSS 样式输入不会位于其标签旁边？
Posted
技术标签:
【中文标题】为啥我的 CSS 样式输入不会位于其标签旁边？【英文标题】：Why won't my CSS styled input sit next to its label?为什么我的 CSS 样式输入不会位于其标签旁边？ 【发布时间】：2012-09-01 00:11:25 【问题描述】：我正在构建一个简单的网络表单，而我的一个输入字段根本不会像预期的那样位于左侧，而是位于前一个表单字段的右侧。我已将表单简化为一个非常简单的文本框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<style>
#new-thing
width: 450px;
#new-thing label
clear: left;
float: left;
width: 120px;
font-weight: bold;
#new-thing input
width: 250px;
margin-bottom: .5em;
</style>
</head>
<body>
<div id='new-thing'>
<form>
<label for='name'>Thing Name:</label>
<input id='name'>
<label for='first-thing'>First:</label>
<input id='first-thing' style='width:6em;'>
<label for='second-thing'>Second:</label>
<input id='second-thing' style='width:6em;'>
</form>
</div>
</body>
</html>
第二个字段应该位于第一个字段的下方，与标签“第二个：”相邻，但它却位于第一个字段的右侧。请参阅此屏幕快照：
我错过了什么？
【问题讨论】：
【参考方案1】：因为您没有向左浮动输入。
将#new-thing input 更改为：
#new-thing input
float: left;
width: 250px;
margin-bottom: .5em;
See here
【讨论】：
好收获。正要发布同样的东西。 拍脑袋！谢谢埃里克，这太棒了。【参考方案2】：试试这个：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<style>
#new-thing
width: 450px;
#new-thing label
clear: left;
float: left;
width: 120px;
font-weight: bold;
#new-thing input
width: 250px;
margin-bottom: .5em;
</style>
</head>
<body>
<div id='new-thing'>
<form>
<table>
<tr>
<td><label for='name'>Thing Name:</label></td>
<td><input id='name' /></td>
</tr>
<tr>
<td><label for='first-thing'>First:</label></td>
<td><input id='first-thing' style='width:6em;' /></td>
</tr>
<tr>
<td><label for='second-thing'>Second:</label></td>
<td><input id='second-thing' style='width:6em;' /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
【讨论】：
以上是关于为啥我的 CSS 样式输入不会位于其标签旁边？的主要内容，如果未能解决你的问题，请参考以下文章
React项目的css样式，为啥标签选择器和ID选择器可以生效，类选择器不行呢？