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

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

html css forms

使用绝对定位时HTML输入重叠,html,css,forms,Html,Css,Forms,我试图在网页上创建一个输入表单，我希望所有的输入元素都沿着某一列排列。我的想法是使用绝对定位将所有输入元素移动到页面上的特定点。它工作得很好，除了一个问题：输入元素在垂直方向上彼此有一点重叠这里有一个MVCE： <!DOCTYPE html> <html><head> <style> span.right_align { display: inline; position: absolute; left: 80px; }

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

这里有一个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>


右对齐{
显示：内联；
位置：绝对位置；
左：80px；
}
分区表格容器{
位置：相对位置；
}
世界上最好的图形用户界面
输入1:

投入2：
对
否

输入3:

投入4：

据我所知，问题在于字体小于输入框的大小，但决定新行“开始”位置的是字体的大小。如果您注释掉或删除

right\u align

类中的所有内容，它们将停止重叠（但也不再如此整齐排列）

我还将注意到，我之所以选择span类解决方案，是因为我需要1）根据下拉列表的当前状态，让一些行动态消失并重新出现，以及2）动态创建新的输入项，这些输入项也会很好地排列起来。这似乎是一个解决方案，它对我的网页的当前工作几乎没有影响

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

编辑：有人建议我创建一个JSFIDLE，所以我做了：

编辑2：在一些行中，我有多个输入，这些输入必须在同一行中显示在一起（对于日期输入）。我没有包括它们，因为这样会使MCVE的大小增加很多。

在css中，使用

行高度，它将起作用：
div.form_container {
    position: relative;
    line-height: 25px;
}

因为您使用的是表单，所以您应该使用标签标签并设置每个标签的宽度-理想情况下比输入名称的宽度稍长一点，以解释更长的标签。使用输入标签也将解决输入的重叠问题
CSS:
HTML:

输入1:

输入2:

输入3:

输入4:

输入5:


@用户感谢您的建议，我将其添加到了问题中。22px几乎完全符合我的期望。谢谢这是一个有趣的解决方案，但是表单中有几个点，我在同一行上有多个下拉输入（对于日期输入）。这个解决方案还能奏效吗？当我在您提供的小提琴中尝试它时，它失败了，因为输入之间存在间隙。
label {
    display: inline-block;
    width: 80px;
}
input {
    margin-left:10px;
}

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