我创建了一个取自 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 进行样式设置，但结果相同。期待建议。
最佳答案
水平对齐有多种选择。最简单的方法是将 display: inline-block; 添加到您的 w3-col 类中。您还可以添加 float: left 或使用 flexbox .
关于html - 对齐单行 CSS 上的列以创建切换标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39146102/