html - 桌面：div 并排包含 3 个元素

Question

我需要一个 div 在一行上并排包含 3 个元素。这些元素是一个输入、一个标签和另一个 div。以下代码将 2 个元素放在一行中，将第三个元素放在第二行。如何解决这个问题？

谢谢。，

div {
  width: 800px;
  border: 1px solid blue;
}

#search {
  width: 200px;
  float: "left";
  border: 1px solid black;
}

label {
  width: 200px;
  border: 1px solid black;
}

.onoffswitch {
  float: left;
}

<div>
  <input type="text" id="search" name="search" placeholder="Search for Courses" />
  <label>Edit mode is</label>
  <div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
  </div>

</div>

标签： htmlcssrow

Answer 1

您需要为您的 div添加display: flex;, 和。flex-direction: row;

div {
    width: 800px;
    border: 1px solid blue;
    display: flex;
    flex-direction: row;
}