Question

在html中我有这样的形式：

<form action="index.php" method="GET">
        Name <input type="text" name="FirstName" size="10" /><br />
        <br />
        Surname: <input type="text" name="LastName" size="10" /><br />
        <br />
</form>

这是一个名字的名字。是否可以使一个盒子完全落到另一个盒子上。因为第一个框更接近名称，因为它的字母数少于姓氏，并且分别占用空格？

Answer 1

不使用CSS最简单的方法执行此操作，使用的是Table HTML。

考虑以下代码段：

＆＃13;

<form action="index.php" method="GET">
<table>
    <tr>
        <td>Name </td>
        <td>
            <input type="text" name="FirstName" size="10" />
            <br />
        </td>
    </tr>
    <tr>
        <td>Surname:</td>
        <td>
            <input type="text" name="LastName" size="10" />
        </td>
    </tr>
</table>
</form>

＆＃13;

Answer 2

这是你可以做到的一种方式。

input{position:absolute;left:80px;}

<form action="index.php" method="GET">
        <label>Name</label> <input type="text" name="FirstName" size="10" />
       
  <br><br>
        <label>Surname:</label> <input type="text" name="LastName" size="10" />
        
</form>

Answer 3

首先，您应该改进HTML。 <br />很难看，您应该使用input s将文本与label相关联：

<form action="index.php" method="GET">
  <label>
    Name: <input type="text" name="FirstName" size="10" />
  </label>
  <label>
    Surname: <input type="text" name="LastName" size="10" />
  </label>
</form>

现在，您可以尝试将form显示为表格：

form {
  display: table;
}
label{
  display: table-row;
}

＆＃13;

form {
  display: table;
}
label{
  display: table-row;
}

＆＃13;

<form action="index.php" method="GET">
  <label>
    Name: <input type="text" name="FirstName" size="10" />
  </label>
  <label>
    Surname: <input type="text" name="LastName" size="10" />
  </label>
</form>

＆＃13;

现在，要调整input s，

您可以将内容与右侧对齐：

label {
  text-align: right;
}

＆＃13;

form {
  display: table;
}
label{
  display: table-row;
  text-align: right;
}

＆＃13;

<form action="index.php" method="GET">
  <label>
    Name: <input type="text" name="FirstName" size="10" />
  </label>
  <label>
    Surname: <input type="text" name="LastName" size="10" />
  </label>
</form>

＆＃13;

或者，如果您希望文本对齐到左侧，则可以将input向右浮动：

input {
  float: right;
}

＆＃13;

form {
  display: table;
}
label{
  display: table-row;
}
input {
  float: right;
}

＆＃13;

<form action="index.php" method="GET">
  <label>
    Name: <input type="text" name="FirstName" size="10" />
  </label>
  <label>
    Surname: <input type="text" name="LastName" size="10" />
  </label>
</form>

＆＃13;

Answer 4

<强> HTML：

<form action="index.php" method="GET">
       <label>Name:</label><input type="text" name="FirstName" size="10" /><br />
        <br />
        <label>Surname:</label> <input type="text" name="LastName" size="10" /><br />
        <br />
</form>

<强> CSS：

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 150px;
    text-align: right;
}
input {
  display: inline-block;
  float: left;
}

小提琴：http://jsfiddle.net/4ncwzLpx/

将一个盒子正好放在另一个盒子上

4 个答案: