使用适当的CSS(而不是表格)实现所需的布局

时间:2015-02-13 20:18:12

标签: html css

我不想使用硬编码的宽度和表格标签来生成我想要实现的布局,但我的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。这是它目前的样子,以及我希望它看起来像什么

enter image description here

2 个答案:

答案 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标签。