Question

我已经快速潦草地写下了以下页面

enter image description here

但我想呈现的是（同样的不同放置）

enter image description here

我的原始代码是

<body>

  <p><b>My Title</b></p>

  <input type="radio" name="ReTranslate" id="TranslateByDate" value="ByDate" checked="checked">By Date:
    <input type="text" id="PackagesDate" /><br>
  <input type="radio" name="ReTranslate" id="TranslateByGuid" value="ByGuid">By Guid
    <input type="text" id="PackageGuid"> <br>
  <input type="radio" name="ReTranslate" id="TranslateByKey" value="ByKey">By Key:
    Field name <input type="text" id="PackageName">  Field number <input type="text" id="VersionNumber"> User name <input type="text" id="UserName"><br> 

  <br>
  <button type="button">ReTranslate</button>
</body>

如何控制放置的元素？
感谢。

Answer 1

您可以通过两种方式执行此操作：

表格（简单方法）

使用表格，您可以这样做：

<table>
  <tr>
    <td>
      <input type="radio" name="ReTranslate" id="TranslateByDate" value="ByDate" checked="checked">By Date:
    </td>
    <td><input type="text" id="PackagesDate" /></td>
  </tr>
</table>

<强> CSS

添加<ul></ul>。

<ul>
    <li><label for=""></label><input type="text"></li>
    <li><label for=""></label><input type="text"></li>
    <li><label for=""></label><input type="text"></li>
    <li><label for=""></label><input type="text"></li>
</ul>

给label一些样式：

label {display: inline-block; width: 75px;}

<强>摘要

不建议在布局中使用<table>标记作为布局。使用<ul>对于语义是有用的。

Answer 2

尝试在文本“按键：”，“字段名称”，“字段编号”和“用户名”之间放置br-tags。然后在文本的左侧设置一个想要的边距。（保证金左：...像素）

Answer 3

您有多种选择。

将所有元素放在表格中，以便对它们进行排序和对齐。
你也可以使用DIV并在不同的容器中构建输入等，以便按照你想要的方式对齐

html - 如何控制元素放置

3 个答案: