desktop:div并排包含3个元素

Question

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

thx。，

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>

Answer 1

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

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

Answer 2

将display:flex属性添加到div的css中会起作用，如果您不希望第三个块也有边框，那么可以将class指定给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>