我是制作响应式网页的新手。当表格的标签高度增加时，我无法将内容下推。表单的标签在页面宽度较小的情况下变长时，不会将橙色框向下推。我的代码在这里：
<html>
<head>
<style type="text/css">
#form{
z-index: 2;
position:relative;
width: 35.42%;
margin-left: 32.71%;
}
.column {
display: inline;
float: left;
clear: both;
}
#formDiv{
z-index: 3;
position: relative;
margin-right: -10000px;
width: 100.59%;
left: 0.3%;
}
#label {
z-index: 4;
min-height: 28px;
line-height: 14px;
text-align: left;
font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
position: relative;
margin-right: -10000px;
width: 30%;
}
.leftinline{
display: inline;
float: left;
}
#input {
z-index: 8;
min-height: 26px;
background-color: orange;
position: relative;
margin-right: -10000px;
margin-top: 27px;
width: 50%;
}
</style>
</head>
<body style="word-wrap:break-word;margin-top:30px;width:100%">
<form class = "column" id="form" action="/action_page.php">
<div id="formDiv">
<label class="leftinline" id="label">
<span>Nameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
</label>
<span class="leftinline" id="input"></span>
</div>
</form>
</body>
</html>有人可以帮我吗？谢谢
最佳答案
由于label和span是浮动的，因此只要有足够的空间，它们就会并排堆叠，因此要强制换行，请在clear: left;规则中添加.leftinline以清除浮动
<html>
<head>
<style type="text/css">
#form{
z-index: 2;
position:relative;
width: 35.42%;
margin-left: 32.71%;
}
.column {
display: inline;
float: left;
clear: both;
}
#formDiv{
z-index: 3;
position: relative;
margin-right: -10000px;
width: 100.59%;
left: 0.3%;
}
#label {
z-index: 4;
min-height: 28px;
line-height: 14px;
text-align: left;
font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
position: relative;
margin-right: -10000px;
width: 30%;
}
.leftinline{
display: inline;
float: left;
clear: left;
}
#input {
z-index: 8;
min-height: 26px;
background-color: orange;
position: relative;
margin-right: -10000px;
margin-top: 27px;
width: 50%;
}
</style>
</head>
<body style="word-wrap:break-word;margin-top:30px;width:100%">
<form class = "column" id="form" action="/action_page.php">
<div id="formDiv">
<label class="leftinline" id="label">
<span>Nameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
</label>
<span class="leftinline" id="input"></span>
</div>
</form>
</body>
</html>