时间戳

首页 > 解决方案 > 以表格方式定位 Materialise CSS 开关

html - 以表格方式定位 Materialise CSS 开关

问题描述

我遇到了 Materialise Switch 对齐问题，希望您能帮忙解决。我正在尝试对齐两个开关元素，以便开关滑块从相同的 x 位置开始。这是元素的简化 HTML（每个开关实际上是一个反应组件）：

<div style="float: left; margin-top: 0.3rem;">
  <div>
    <div class="switch">
      <label>Show all products
        <input type="checkbox">
        <span class="lever"></span>
        Show on sale products only
      </label>
    </div>
 </div>

 <div>
   <div class="switch">
     <label>Show out of stock products
     <input type="checkbox" checked="">
     <span class="lever"></span>
     Hide out of stock products</label>
   </div>
 </div>
</div>

开关根据当前标签的长度对齐，如下所示：

Show all product <-> Show on sale products only

Show of stock products <-> Hide out of stock products

虽然我希望它以下列方式显示：

Show all product       <-> Show on sale products only

Show of stock products <-> Hide out of stock products

感谢您可能提出的任何建议。

谢谢，

标签： htmlcssreactjsmaterialize

解决方案

您只需要对结构和CSS. 我已经span用类名将标签文本包装在标签中.switch-label并添加min-width到该元素中。

.switch .switch-label {
    display: inline-block;
    min-width: 135px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" integrity="sha256-OweaP/Ic6rsV+lysfyS4h+LM6sRwuO3euTYfr6M124g=" crossorigin="anonymous" />
<div style="float: left; margin-top: 0.3rem;">
  <div>
    <div class="switch">
      <label><span class="switch-label">Show all products</span>
        <input type="checkbox">
        <span class="lever"></span>
        Show on sale products only
      </label>
    </div>
 </div>

 <div>
   <div class="switch">
     <label><span class="switch-label">Show out of stock products</span>
     <span>
     <input type="checkbox" checked="">
     <span class="lever"></span></span>
     <span class="switch-label">Hide out of stock products</span>
     </label>
   </div>
 </div>
</div>

请让我知道这可不可以帮你！

推荐阅读