html - 如何将文本框与标签分开？

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

并带走:

position:absolute； 右:800px；

来自 .myform { 宽度:40px； 文本对齐:左； position:absolute； 右:800px； 高度:1.5em；

Answer 1

尝试给 label 一个宽度:

label {
    width: 100px;
}