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

Question

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

Answer 1

这是一个使用 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>