1

我试图在 a 中显示两个开关Sidenav，标签长度不同。这是我的原始版本，没有尝试对齐开关：

<html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  </head>
  <body>
    <ul id="slide-out" class="sidenav">
      <li><a>
        Label
        <span class="switch">
          <label>
            <input type="checkbox"></input>
            <span class="lever"></span>
          </label>
        </span>
      </a></li>
      <li><a>
        Long long label
        <span class="switch">
          <label>
            <input type="checkbox"></input>
            <span class="lever"></span>
          </label>
        </span>
      </a></li>
    </ul>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        M.Sidenav.init(document.querySelectorAll(".sidenav"), { edge: "right" })[0].open();
       });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  </body>
</html>

这完全符合预期，两个开关水平出现在标签结束的任何地方：

未对齐

我想我可以通过将right类添加到开关来解决这个问题，即将两者都更改<span class="switch">为<span class="switch right">; 但是，这会完全破坏开关的垂直对齐方式：

右对齐

在 a中右对齐这些switches的正确方法是sidenav什么？

4

2 回答 2

3

您可以从您的 div 中制作一个 flex 容器并对齐它们space-between。如果你改变宽度，你可以影响它们，这样你就可以调整你的结果。

希望这可以帮助。下面的 HTML 没有改变。

.sidenav li>a {
  align-items: center;
  display: flex!important;
  justify-content: space-between!important;
}
<html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  </head>
  <body>
    <ul id="slide-out" class="sidenav">
      <li><a>
        Label
        <span class="switch">
          <label>
            <input type="checkbox"></input>
            <span class="lever"></span>
          </label>
        </span>
      </a></li>
      <li><a>
        Long long label
        <span class="switch">
          <label>
            <input type="checkbox"></input>
            <span class="lever"></span>
          </label>
        </span>
      </a></li>
    </ul>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        M.Sidenav.init(document.querySelectorAll(".sidenav"), { edge: "right" })[0].open();
       });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  </body>
</html>

于 2018-06-22T13:39:18.740 回答
1

我不知道是否可以严格按照材料的方式进行，但是您可以将其添加到 css 中：

<style>
     .switch label .lever {
        top: 16px;
        float: right;
     } 
</style>

例子：

<html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <style>
         .switch label .lever {
          top: 16px;
          float: right;
         } 
    </style>
  </head>
  <body>
    <ul id="slide-out" class="sidenav">
      <li><a>
        Label
        <span class="switch">
          <label>
            <input type="checkbox"></input>
            <span class="lever"></span>
          </label>
        </span>
      </a></li>
      <li><a>
        Long long label
        <span class="switch">
          <label>
            <input type="checkbox"></input>
            <span class="lever"></span>
          </label>
        </span>
      </a></li>
    </ul>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        M.Sidenav.init(document.querySelectorAll(".sidenav"), { edge: "right" })[0].open();
       });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  </body>
</html>

于 2018-06-22T13:50:24.520 回答