如何将HTML标签和输入框并排排列

Question

我有一些HTML代码，我想用CSS将标签和输入框并排，且标签在输入框的上方。我尝试使用display:inline-block;这个CSS属性，但无法实现。我在这里找到了类似的问题。

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开发相关。

这是我想要的样子：

- LAS

---

好的，我会尽力以最通俗易懂的方式翻译内容，同时保持原意不变。以下是需要翻译的内容：

1. Could you please provide me with the latest sales report? 请提供最新的销售报告。
2. I'm sorry, but I cannot attend the meeting tomorrow as I have a prior engagement. 很抱歉，由于我有之前的约定，明天无法参加会议。
3. Our company is committed to providing high-quality products and excellent customer service. 我们公司致力于提供高质量的产品和优秀的客户服务。
4. The new policy will come into effect next month. 新政策将于下个月生效。
5. We are currently experiencing some technical difficulties and are working to resolve the issue as soon as possible. 我们目前遇到了一些技术困难，正在努力尽快解决问题。
6. I would like to request a refund for this product, as it arrived damaged. 我想要申请退款，因为这个产品在运输过程中损坏了。
7. Thank you for considering my application. I look forward to hearing back from you. 感谢您考虑我的申请，期待您的回复。
8. Our team is currently working on a solution to improve efficiency and reduce costs. 我们的团队正在研究一个解决方案，以提高效率并降低成本。
9. In order to ensure the safety of our employees, we are implementing new safety protocols. 为了确保员工的安全，我们正在实施新的安全协议。
10. We apologize for the inconvenience and appreciate your patience as we work to resolve this issue. 我们为给您带来不便表示歉意，并感谢您的耐心等待，我们正在努力解决这个问题。

- Temani Afif

“你能解释一下这句话吗？‘我想把标签和输入框并排放置，但标签要在输入框上方。’ 它矛盾了，是标签和输入框并排放置还是标签在输入框上方？” - Huangism

想要让“输入”与标签在顶部并排放置。 - LAS

我将您的问题标记为重复，因为如果您查看自己发布的其他问题链接，您将看到HTML差异，这应该可以解决您的问题。看起来似乎没有人在评论或回答之前真正看过其他问题。 - Huangism

@LAS 我已经再次更新了代码片段，请查看更新后的答案。 - user2796515

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

- user2796515

---

这不是我要找的内容，我已经编辑了问题并附上了图片来说明。 - LAS

我希望每行有两个 input，其中有两个在上方，另外两个在下方。 - LAS

如果没有任何浮动，为什么要使用clear: both呢？ - elena

@elena，不确定这是针对我还是原帖的，对于我的情况，它是原始CSS中剩余的，没有影响，我已经在https://jsfiddle.net/Lu5k1yk8/6/上将其删除了。 - user2796515

@user2796515你在回答中提供的fiddle是第5版，仍然包含它。 - elena

@elena。在答案中修复了小提琴。 - user2796515

Answer 2

只需删除br标签并将其添加到您的代码中即可。

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

- Girdharilal Pandey

---

这不是我要找的内容。我已经编辑了问题，并放置了一张图片以说明。 - LAS

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>

编辑：我已经更改了代码。希望这次能对你有所帮助 ;)

希望能有所帮助。

- Serge Inácio

---

这不是我想要的，已经通过图片对问题进行了编辑。 - LAS

@LAS 我已经编辑了代码，我认为它看起来与你的截图相似。希望这次能有所帮助。 - Serge Inácio

Answer 4

我认为最好的方法是将标签和输入放在一个表格中。代码如下：

<table> <tr><th>标签</th><td><input type="text"></td></tr></table>

- Sumit Kumar

---

这不是我要找的，我已经编辑了带有图像的问题。 - LAS

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>

- elena