javascript - 让文本和标 checkout 现在同一行

Question

我对此感到困惑，因为我已经通过表格尝试了 CSS 和直接 HTML，以使我的文本和文本框出现在同一行，但是这两种方法总是将文本放在文本框的顶部.我喜欢表格方法，因为我的 CSS 方法只是将页面分成两半，并且文本框之间有尴尬的空间。

但是，问题是 - 在 HTML(我们可以使用 JavaScript、JQuery、CSS、HTML 等)中如何相应地格式化它？

尝试 1

<table>
 <tr>
    <td>Payroll End Date:<input type="date" name="enddate" value="<?= $_POST['psdate'] ?>"></td>
    <td>Payroll End Date:<input type="date" name="startdate" value="<?= $_POST['pedate'] ?>"></td>
 </tr>
</table>

尝试 2

<div id="right">Payroll End Date:<input type="date" name="enddate" value="<?= $_POST['psdate'] ?>"></div>
<div id="left">Payroll End Date:<input type="date" name="startdate" value="<?= $_POST['pedate'] ?>"></div>


#left {
  float: right ;
  width: 50% ;
}
#right {
  float: right;
  width: 50%;
}

Answer 1

试试这个例子 - 它对我有用并且把所有东西都放在一行上

<div name="payroll" id="oneline">
Payroll End Date:<input type="date" name="enddate" value="<?= $_POST['psdate'] ?>">
Payroll End Date:<input type="date" name="startdate" value="<?= $_POST['pedate'] ?>">
</div>

并添加一些CSS风格

#oneline {
    display: inline-block;
    vertical-align: right;
}

还有一个方便的 fiddle http://jsfiddle.net/Lera/HEeHd/