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

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 *锁定级元素*由于某种原因，你不能将它嵌套在p标签内，那是无效标记。

Answer 2

恕我直言，从语义上讲，你应该使用<label>和好的<br/>代替<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);
}

检查此JSFiddle

Answer 3

首先你应该使用标签而不是段落，然后你应该使用这样的表:(这是你的最终代码）

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

Answer 4

试试这个

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