我刚刚编写了一个 HTML 表单，我在将评论字段与文本字段右侧对齐时遇到了一些麻烦。
我在彼此下面有 3 个文本字段，我想让评论文本字段与它们的右侧对齐，我尝试将其向右浮动，然后给它一个负的上边距以将其向上移动，但标签文本读取“评论”不会随文本字段 float ，因为它没有类
我还尝试用 2 个表格单元格分隔它们，但这没有帮助，因为当我想通过响应式布局在移动设备中查看时，我可以移动评论字段，因为它卡在表格单元格中
这是我试过的 float 代码的例子
<style type="text/css">
![enter image description here][1]<!--
body {
background-color: #FFF;
}
#form {
width:960px;
background-color:#edf8ff;
height:650px;
}
.gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
}
.gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
}
.gezza-comments{
width:437px;
height:300px;
float:right;
margin-top:-80px;
}
-->
</style></head>
<body>
<div id="form">
<form action="" class="gezza-form" method="post" >
First Name<br />
<input name="firstname" type="text" class="gezza-field" /><br/>
Last Name<br />
<input name="lastname" type="text" class="gezza-field" /><br/>
Email Address<br />
<input name="email" type="text" class="gezza-field" />
Comments<textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea>
</form>
</div><!-- close form -->
这是我想要实现的目标
[1]: http://i.stack.imgur.com/g3yO8.png查看图片
最佳答案
移除 margin-top:-80; float:right 来自评论框样式，并将评论框放在 div 中，在表单的其他字段之前。将 div 向右浮动。请参阅下面显示的示例代码:
<style type="text/css">
![enter image description here][1]<!--
body {
background-color: #FFF;
}
#form {
width:960px;
background-color:#edf8ff;
height:650px;
}
.gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
}
.gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
}
.gezza-comments{
width:437px;
height:300px;
}
-->
</style></head>
<body>
<div id="form">
<form action="" class="gezza-form" method="post" >
<div style="float:right;">Comments<br /><textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea></div>
First Name<br />
<input name="firstname" type="text" class="gezza-field" /><br/>
Last Name<br />
<input name="lastname" type="text" class="gezza-field" /><br/>
Email Address<br />
<input name="email" type="text" class="gezza-field" />
</form>
它适用于我的电脑，应该适用于移动设备。
关于html - 对齐表单字段并修复响应式布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9443111/