Html 如何垂直显示一行中的文本框

我有一张表格

<form action="index.php" method="post">
    <p>From<input type="text" id="popupDatepicker" name="date1"></p>
    <p>To<input type="text" id="popupDatepicker2" name="date2"></p>
<input type="submit" name="submit" value="Submit" id="submit" />

它在web上显示的表单如下所示：

To

Textbox比

From

Textbox稍微向后

---

我想使用css在线显示这两个文本框。请帮助？

将名称包装在

标签中

并为标签元素指定一些固定的

宽度

，这样，您的文本框将垂直内联，并且文本框的名称将有意义，并且对于屏幕阅读器或其他此类设备而言，将以更好的方式访问

form p label {
    width: 80px;
    display: inline-block;
}

虽然，我不认为这是一个明智的方法来实现这一点，通常表单元素只是一个信息文本框列表，我们在其中询问用户，他们的信息

因此，使用

ul

和

li

或只使用

div

而不是

p

元素是非常合乎逻辑的，因为如果出于某种原因需要额外的b*锁级别元素*，则无法将其嵌套在

p

标记中，这是无效的标记。

试试这个

<p>To<input type="text" id="popupDatepicker2" name="date2" style="
    margin-left: 19px;
"></p>

到

从语义上讲，你应该使用
和旧的

而不是

并为标签设置公共宽度

<form action="index.php" method="post">
 <label for='popupDatepicker'>From</label>
 <input type="text" id="popupDatepicker" name="date1" /><br/>
 <label for='popupDatepicker2'>To</label>
 <input type="text" id="popupDatepicker2" name="date2" /><br/>
 <input type="submit" name="submit" value="Submit" id="submit" />
</form>

label{
 display:inline-block; // by default label is inline, which won't take height and width
 width:100px;
}
input[type="text"], textarea, input[type="file"] {
 background-color: green;
 -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
 box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}


从…起


到


标签{
display:inline block；//默认情况下，标签为inline，不采用高度和宽度
宽度：100px；
}
输入[type=“text”]，文本区域，输入[type=“file”]{
背景颜色：绿色；
-webkit盒阴影：插入0 2px 3px rgba（0,0,0,0.2）；
长方体阴影：嵌入0.2px 3px rgba（0,0,0,0.2）；
}

勾选此项，首先你应该使用标签标签而不是段落，然后你应该使用如下表格：（这是你的最终代码）


从…起
到
-我只是在创造一个答案，然后做了一把小提琴，这样你就可以得到它了。谢谢Alien先生和Ruddy先生。我真的很感谢你的帮助。
<form action="index.php" method="post">
 <label for='popupDatepicker'>From</label>
 <input type="text" id="popupDatepicker" name="date1" /><br/>
 <label for='popupDatepicker2'>To</label>
 <input type="text" id="popupDatepicker2" name="date2" /><br/>
 <input type="submit" name="submit" value="Submit" id="submit" />
</form>

label{
 display:inline-block; // by default label is inline, which won't take height and width
 width:100px;
}
input[type="text"], textarea, input[type="file"] {
 background-color: green;
 -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
 box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

<form action="index.php" method="post">
    <table>
            <tr><td><label>From</label></td><td><input type="text" id="popupDatepicker" name="date1"></td>
            <tr><td><label>To</label></td><td><input type="text" id="popupDatepicker2" name="date2"></td>
    </table>
<input type="submit" name="submit" value="Submit" id="submit" />