如何并排排列html标签和输入答案

【问题标题】：How to arrange html label and input side by side如何并排排列html标签和输入
【发布时间】：2018-05-24 00:07:52
【问题描述】：

我有这几行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

这就是我想要的样子

【问题讨论】：

<br> = 换行 != 并排
你能解释一下这句话i want to arrange the label and input side by side with the label on top of the input它自相矛盾。标签和输入并排或标签在输入之上？
想让input 并排放置标签在顶部
再看另一个问题，html不一样。您必须将标签和输入包装在一个 div 中并将该 div 设置为显示内联块，您缺少包装
HTML form with side by side input fields的可能重复

标签： html css

【解决方案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

【讨论】：

这不是我正在寻找的已经用图像描述的问题编辑了问题
我希望每行有两个 input two input on top and two below
如果任何地方都没有float，你为什么还要使用clear: both。
@elena，不确定这是针对我还是 OP，对于我来说，它是原始 CSS 的剩余部分，没有影响，我在 jsfiddle.net/Lu5k1yk8/6 上删除了它
@user2796515 您在答案中链接的小提琴是版本 5，它仍然包含它。

【解决方案2】：

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

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

【讨论】：

这不是我正在寻找的已经用图像描述的问题编辑了问题

【解决方案3】：

我认为最好的方法是取标签并在表格中输入。在此处输入代码<table> <tr><th>label</th><td><input type="text"></td></tr></table>

【讨论】：

这不是我正在寻找的已经用图像描述的问题编辑了问题

【解决方案4】：

我稍微修改了你的代码，我希望这是你要找的：

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

另外，如果您使用&nbsp，则需要在其末尾添加分号：&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>

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

希望这会有所帮助。

【讨论】：

这不是我正在寻找的已经用图像描述的问题编辑了问题
@LAS 我编辑的代码在我看来与您的屏幕截图相似。希望这次能有所帮助。

【解决方案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>

【讨论】：