Question

我正在尝试在网页上创建输入表单，并且我希望所有输入元素都沿着某列排列。我的想法是使用绝对定位将所有输入元素移到页面上的特定点。它工作正常，除了一个问题：输入元素在垂直方向上相互重叠。

这是一个MVCE：

<!DOCTYPE html>
<html><head>
<style>
span.right_align {
    display: inline;
    position: absolute;
    left: 80px;
}
div.form_container {
    position: relative;
}
</style>
<title>World's Best GUI</title></head>

<body type="text/css" style="background-color: #F7D879; font-family: Georgia, serif">

<div class="form_container">
  <form name="guiForm" method="post" action="return false;">
    Input 1: <span class="right_align"><input type="text"></span><br>
    Input 2: <span class="right_align"><select autocomplete="off">
    <option value="yes">Yes</option>
    <option value="no">No</option></select></span><br>
    Input 3: <span class="right_align"><input type="text" size="50"></span><br>
    Input 4: <span class="right_align"><input type="text"></span>
  </form>
 </div>

</body>
</html>

据我所知，问题是因为字体小于输入框的大小，但是字体的大小决定了新行“开始”的位置。如果您注释掉或删除right_align课程中的所有内容，它们会停止重叠（但它们也会停止排队）。

我还会注意到我选择span-class解决方案的原因是因为我需要1）根据下拉列表的当前状态动态消失并重新出现，2）动态创建新的输入项目也将很好地排列自己。这似乎是一个解决方案，会干扰我网页的当前工作。

有没有一种简单的方法来解决这个问题？我应该以完全不同的方式创建这些列吗？我也接受了全新的想法。

编辑：有人建议我创建一个jsfiddle，所以我做了：http://jsfiddle.net/uy9comxk/

编辑2：我将有多行输入，这些输入必须在同一行上彼此出现（对于日期输入）。我没有包括它们，因为它会大大增加MCVE的大小。

Answer 1

在你的css中，使用line-height它会起作用：

div.form_container {
    position: relative;
    line-height: 25px;
}

With a fiddle

Answer 2

由于您正在使用表单，因此您应该使用label标签并设置每个表单的宽度 - 理想情况下比输入名称的宽度稍长一些，以便考虑较长的表单。使用输入标签也可以解决输入的重叠问题。

CSS：

label {
    display: inline-block;
    width: 80px;
}
input {
    margin-left:10px;
}

HTML：

<form name="guiForm" method="post" action="return false;">
  <label for="input1">Input 1:</label> <input name="input1" type="text"><br>
  <label for="input2">Input 2:</label> <input name="input2" type="text"><br>
  <label for="input3">Input 3:</label> <input name="input3" type="text"><br>
  <label for="input4">Input 4:</label> <input name="input4" type="text"><br>
  <label for="input5">Input 5:</label> <input name="input5" type="text"><br>
</form>

http://jsfiddle.net/ub3bw1rv/

使用绝对定位时HTML输入重叠

2 个答案: