桌面：div 并排包含 3 个元素答案

【问题标题】：desktop: div to contain 3 elements side by side桌面：div 并排包含 3 个元素
【发布时间】：2020-11-23 01:41:59
【问题描述】：

我需要一个 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>

【问题讨论】：

标签： html css row

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

将display:flex 属性添加到 div 的 css 将起作用，如果您不希望第三个块也有边框，则将类指定为 div 或在 span 中采用第三个块。

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

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

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

<div>
  <input
    type="text"
    id="search"
    name="search"
    placeholder="Search for Courses"
  />
  <label>Edit mode is</label>
  <span 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>
  </span>
</div>

【讨论】：