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 { 宽度：40像素; text-align：left; 位置：绝对; 右：800px; 身高：1.5em; }

Answer 1

尝试给label一个宽度：

label {
    width: 100px;
}

Answer 2

＆＃13;

#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%
}

＆＃13;

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

＆＃13;

Answer 3

我从输入中删除了position:absolute（因为在我的屏幕中，他们在哪里，这就是为什么你应该使用它，如果没有其他工作），然后在表单标签上添加margin-right。 demo;

更新

我添加了一个固定的宽度来修改具有不同文本长度的标签的可能性，这里是：

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

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

希望它有所帮助！

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

3 个答案:

相关CSS

更新