我正在构建一个简单的网络表单,我的一个输入字段根本不会按照原样穿在左边,而是位于前一个表单字段的右侧。我已将表单简化为一个非常简单的文本案例。
<!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>
第二个字段应位于第一个字段下方,与标签“Second:”相邻,但它位于第一个字段的右侧。看到这个屏幕快照:
我错过了什么?
答案 0 :(得分:5)
因为你没有将你的输入浮动。
将#new-thing input
更改为:
#new-thing input {
float: left;
width: 250px;
margin-bottom: .5em;
}
答案 1 :(得分:-1)
试试这个:
<!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>