html - 内联一些元素，某些元素根据相邻元素而阻塞

我需要在弹性框中显示“输入”和“文本区域”项的列表。每个项目的宽度等于弹性盒的45％。
我需要一个困难的问题。
如果它们是同一类型，则需要在同一行上显示彼此相邻的2个项目。否则，以不同的行显示它们。


例如：
彼此相邻的2个“输入”将显示在同一行上




输入和文本区域彼此相邻以换行显示

最佳答案

您可以签出css选择器，因为它们按住了您所要求的键。

使用CSS选择器，您可以：


选择所有后代：using a space
选择直接子级：using the > symbol
选择第一个之后的相邻兄弟姐妹：using the + symbol
不要在第一个之后立即选择相邻的同级：using the ~ symbol


在此处详细了解以下内容：Understand ‘+’, ‘>’ and ‘~’ symbols in CSS Selector

input + input {
  display: inline;
}

 input + input + label {
   display: flex;
 }

 label + input {
   display: flex;
 }

<div class="container">
<input placeholder="input1" />
<input placeholder="input2" />

<label>label1</label>
<input placeholder="input3" />

</div>

关于html - 内联一些元素，某些元素根据相邻元素而阻塞，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58443391/