html - 对齐单行 CSS 上的列以创建切换标签

Question

我创建了一个取自 w3schools 的切换开关(只是一种奇特的 CSS 输入复选框类型)。此切换复选框将在两种状态之间切换:绘制和删除。

我正在尝试使用 W3.CSS 响应类 w3-.row 向我的复选框添加一些“标签”。 HTML 代码:

<div class="container-fluid">
<div class="row content">
<div class="col-sm-2 sidenav text-center" id="left_col">
<div class="well ">
<div class="w3-row w3-container">
<div class="w3-col s4 w3-center" style="width:none">
<p>Draw</p>
</div>
<div class="w3-col s4 w3-center" style="width:none">
<label class="switch">
<input type="checkbox" id="editor_draw_erase"></input>
<div class="slider round"></div>
</label>
</div>
<div class="w3-col s4 w3-center" style="width:none">
<p> Erase </p>
</div>
</div>
</div>
</div>
</div>
它的外观( fiddle ):https://jsfiddle.net/gdbcn02g/

我多么希望它会这样: toggle switch

也许 w3-row/col 不是标记我的切换开关的最佳方法，因为我对 CSS 和所有网络编程都很陌生。我也尝试使用 .table 进行样式设置，但结果相同。期待建议。

Answer 1

水平对齐有多种选择。最简单的方法是将 display: inline-block; 添加到您的 w3-col 类中。您还可以添加 float: left 或使用 flexbox .