如何安排html标签和并排输入

Question

我有几行html代码，我希望label和input并排label在input之上与css但我无法解决它。我发现类似的问题here建议使用display:inline-block;来实现这一目标，但在我的代码中包含它之后就无法实现。

body {
  background-color: red;
}

input[type=text] {
  border: 2px solid black;
  border-radius: 4px;
  margin-left: 150px;
  display: inline-block;
  clear: both;
}

input[type=number] {
  border: 2px solid black;
  border-radius: 4px;
  margin-left: 150px;
  display: inline-block;
  clear: both;
}

<div id=tk>
  <form action="" , method="">
    <div id="styleform">
      <label for="NAME">&nbsp&nbsp FIRST NAME</label></br>
      <input type="text" id="NAME" size="20"></br>
      </br>
      <label for="no">&nbsp&nbsp NUMBER</label></br>
      <input type="number" id="no" , size="45"></br>
      </br>
      <label for="age">&nbsp&nbsp AGE</label></br>
      <input type="number" id="age" size="45"></br>
      </br>
      <label for="S_NO:">&nbsp&nbsp CODE</label></br>
      <input type="text" id="S_NO:" size="20"></br>
      </br>
    </div>
  </form>
</div>

对于你们这些新人来说，我觉得这个简单的问题在于web development

这就是我希望它看起来像

Answer 1

<强>更新

提供图片后更新了小提琴

@LAS您正在插入换行符，这是问题的一部分。我创造了这个小提琴，修复了几件事：https://jsfiddle.net/Lu5k1yk8/6/

• 补充说;在你的空间之后
• 修正换行符（我认为语法应该是<br>或<br />，而不是</ br>并在标签后删除它们
• 将文本框的CSS更改为inline-table
• 标签宽度增加，因此无法创建新行

另外，我建议不要使用空格（nbsp;）或<br />，而是使用CSS创建正确的空格和换行符。

以下是如何使用填充和边距的一个很好的演示：http://www.digizol.com/2006/12/margin-vs-padding-css-properties.html

Answer 2

只需删除 br 标记，然后将其添加到您的代码中

 input[type="text"] + label {
           display: inline;
    }

Answer 3

我改变了你的代码，我希望这是你正在寻找的：

我将label设置为inline-block元素并将其min-width设置为150px，然后移除margin-left: 150px;。

此外，如果您使用&nbsp，则需要在其末尾添加分号： ，并使用</br>在末尾添加斜杠： <br />

body{
  background-color: red;
}

label {
  display: block;
  min-width: 150px;
}

.test {
  display: inline-block;
  width: 45%;
  background-color: white;
  border: solid 1px blue;
  padding: 5px 10px;
} 

input[type=text] {
  border: 2px solid black;
  border-radius: 4px;
  display: inline-block;
  clear: both;

}

 input[type=number] {
  border: 2px solid black;
  border-radius: 4px;
  display: inline-block;
  clear: both;
}

<div id=tk>
      <form action="", method="">

        <div id="styleform">
          <div class="test">
            <label for="NAME" >FIRST NAME</label>
            <input type="text" id="NAME" size="20"><br /><br />
          </div>
          <div class="test">
            <label for="no" >NUMBER</label>
            <input type="number" id="no", size="45"><br /><br />
          </div>
          <div class="test">
            <label for="age" >AGE</label>
            <input type="number" id="age" size="45"><br /><br />
          </div>
          <div class="test">
            <label for="S_NO:" >CODE</label>
            <input type="text" id="S_NO:" size="20"><br /><br />
          </div>
        </div>

        </form>
   </div>

**编辑：**我已经更改了代码。希望这次能帮到你;）

希望这有帮助。

Answer 4

我认为最好的方法是将标签和输入放在table.enter代码中<table> <tr><th>label</th><td><input type="text"></td></tr></table>

Answer 5

你的意思是这样吗？

.block {
  display: block;
}

.inline-block {
  display: inline-block;
  width: 49%;
}

body {
  padding: 10px;
}

<div id=tk>
  <form action="" method="">
    <div id="styleform">
      <div class="inline-block">
        <label class="block" for="NAME">FIRST NAME</label>
        <input class="block" type="text" id="NAME" size="20">
      </div>
      <div class="inline-block">
        <label class="block" for="no">NUMBER</label>
        <input class="block" type="number" id="no" , size="45">
      </div>
      <div class="inline-block">
        <label for="age" class="block" >AGE</label>
        <input type="number" class="block"  id="age" size="45">
      </div>
      <div class="inline-block">
        <label class="block" for="S_NO:">CODE</label>
        <input type="text" class="block"  id="S_NO:" size="20">
      </div>
    </div>
  </form>
</div>