如何将文本框与标签分离

Question

我想要的是有一列标签，右边有一列文本框，大约相隔几个选项卡，所有文本框都在（各自的）页边距上对齐。

到目前为止，我有这个。但是，当我调整屏幕大小时，我的文本框会移动。如何修复它们？

这是CSS：

#layout {
    background-color: #f5fffa;
    width: 600px;
    padding: 20px;
    border: 5px solid black;
    margin: 0 auto;
    color: black;
    font-family: arial;
    font-size: 15px;
    font-weight: bold;
}
#zero {
    text-align: center;
}
#one {
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    border:4px solid #18ab29;
    border-width: 4px;
    background-color: #44c767;
    color:#ffffff;
    padding-left: 9em;
    padding-right: 9em;
}
.myform {
    width:40px;
    text-align: left;
    position: absolute;
    right: 800px;
    height: 1.5em;
}

这是HTML:

<div id="layout">
<h1 id="zero">Title</h1>
    <form id="one">
    <br>
        <label>input one:</label>
        <input type="text" class="myform" value="0" /><br><br>
        <label>input two:</label>
        <input type="text" class="myform" value="0" /></br>
    </br>
    </form>
</div>

编辑：

我想明白了：

添加此：

#one label {
    display: inline-block;
    width: 270px;
}

带走：

位置：绝对；右：800px；

来自.myform{宽度：40px；文本对齐：左；位置：绝对；右：800px；身高：1.5em；}

Answer 1

尝试给label一个宽度：

label {
    width: 100px;
}

Answer 2

#layout {
  background-color: #f5fffa;
  width: 600px;
  padding: 20px;
  border: 5px solid black;
  margin: 0 auto;
  color: black;
  font-family: arial;
  font-size: 15px;
  font-weight: bold;
}
#zero {
  text-align: center;
}
#one {
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  border: 4px solid #18ab29;
  border-width: 4px;
  background-color: #44c767;
  color: #ffffff;
  height: 1.5em;
}
.myform {
  text-align: left;
  position: absolute;
  right: 800px;
}
.leftCol {
  float: left;
  width: 50%
}
.rightCol {
  float: right;
  width: 50%
}

<div id="layout">
  <h1 id="zero">Title</h1>
  <form id="one">
    <div class="leftCol">
      <label>input one:</label>
      <input type="text" value="0" />
    </div>
    <div class="rightCol">
      <label>input two:</label>
      <input type="text" value="0" />
    </div>
  </form>
</div>

Answer 3

我从输入中删除了position:absolute（因为在我的屏幕中，如果没有其他功能，那就是为什么你应该使用它），然后在表单标签上添加了margin-right演示

相关CSS

#one label{
    margin-right:10px;
}

更新

我为amend添加了一个固定的宽度，可以使用不同文本长度的标签，这里是：

#one label{
    display:inline-block;
    margin-right:10px;
    width:150px;
}

您应该将width:150px更改为您想要的任何内容：）

希望它能有所帮助！