html - 如何在一行中垂直显示文本框

Question

我有一个表格

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

我的 CSS 是

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);}

在网络上显示的表单是这样的:

To 文本框比 From 文本框稍靠后 我想使用 css 在线显示两个文本框。请帮忙？

Answer 1

将名称包装在 label 中标记并分配一些固定的 width对于标签元素，这样，您的文本框将垂直内联，而且文本框的名称将有意义，并且就屏幕阅读器或其他此类设备而言，将以更好的方式访问。

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

Demo

不过，我认为这不是实现此目标的明智方法，通常表单元素不过是我们向用户询问他们的信息的信息文本框列表。

所以使用 ul 是合乎逻辑的和 li或者只有一个 div而不是 p 元素，因为如果出于某种原因碰巧需要额外的 b*lock level 元素*，则不能将其嵌套在 p 中。标记，那是无效标记。