我不想使用硬编码的宽度和表格标签来生成我想要实现的布局,但我的CSS技能尚未开发。我的布局如下:
<div id="container">
<div id="DataType">
Type of Data Request <input type="text" />
</div>
<div id="Arguments" >
Arguments <textarea name="arguments" rows="4" cols="45" ></textarea>
</div>
<div id="TargetEnvironment" >
Target Environment <input type="text" />
</div>
<div id="SubmitButton">
<button id="btnSubmit">Submit Request</button>
</div>
</div>
我希望它能用CSS表现出某种特定的方式。我可以使用表格和硬编码边距来实现它,但不能使用适当的CSS。这是它目前的样子,以及我希望它看起来像什么
答案 0 :(得分:2)
以下是使用float
的解决方案。
#container {
width: 500px;
}
label {
margin-top: 1em;
display: block;
vertical-align: top;
clear: right;
overflow: auto;
}
input, textarea {
width: 300px;
float: right;
padding: 2px;
}
button {
float: right;
}
<div id="container">
<label id="DataType">
Type of Data Request <input type="text" />
</label>
<label id="Arguments" >
Arguments <textarea name="arguments" rows="4" cols="45" ></textarea>
</label>
<label id="TargetEnvironment" >
Target Environment <input type="text" />
</label>
<label id="SubmitButton">
<button id="btnSubmit">Submit Request</button>
</label>
</div>
答案 1 :(得分:0)
您可以设置宽度并在输入上使用float:right。
我没有看到使用边距或填充来分隔线条的任何问题。
另一个提示:对表单的标签使用label标签。