0

我很快就草草写下了以下页面

在此处输入图像描述

但我想呈现的是（相同的东西不同的放置）

在此处输入图像描述

我的原始代码是

<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>

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

4

3 回答 3

2

您可以通过两种方式做到这一点：

  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>

  2. 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>不建议对布局使用标签。of 的使用<ul>有利于语义。

于 2013-10-22T13:40:14.143 回答
0

你有多种选择。

  • 将所有元素放在一个表中以排序和对齐它们。
  • 您还可以使用 DIV 并在不同的容器中构建输入等，以使其以您想要的方式对齐
于 2013-10-22T13:43:53.513 回答
0

尝试在文本“By Key:”、“Field name”、“field number”和“user name”之间放置 br-tags。然后在文本的左侧设置一个想要的边距。（左边距：... px）

于 2013-10-22T13:41:28.397 回答