Позиционирование переключателей Materialize CSS в табличной форме

Question

Я столкнулся с проблемой выравнивания переключателя материализации, надеясь, что вы можете помочь с этим. Я пытаюсь совместить два переключателя, чтобы ползунки переключателей начинались в одной и той же позиции х. Вот упрощенный 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

Хотя я хочу, чтобы это отображалось в следующем way:

Show all product       <-> Show on sale products only

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

Благодарим вас за любые предложения.

Спасибо,

Answer 1

Вам просто нужно небольшое изменение вашей структуры и в 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>

Пожалуйста, дайте мне знать, если это поможет!