Question

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

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

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

Answer 1

您可以签出 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>

Answer 2

您可以使用此代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <form>
      <div class="row">
        <div class="form-group col-md-6 col-sm-6 col-xs-12">
          <label for="formGroupExampleInput">EAN *</label>
          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
        </div>
        <div class="form-group col-md-6 col-sm-6 col-xs-12">
          <label for="formGroupExampleInput2">Family</label>
          <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="F&B">
        </div>
        <div class="form-group col-md-12 col-sm-12 col-xs-12">
          <label for="formGroupExampleInpu3">Standing product reference</label>
          <input type="text" class="form-control" id="formGroupExampleInput3" placeholder="">
        </div>
        <div class="form-group col-md-12 col-sm-12 col-xs-12">
          <label for="exampleFormControlTextarea1">Details</label>
          <textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
        </div>
      </div>
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

内联一些元素，并根据相邻元素

2 个答案: