对齐卡内的复选框

Question

我正在使用materializecss，我正在尝试将复选框对齐到卡片中：

<div id="email-list" class="col s10 m8 l8 card-panel z-depth-1">
   <ul class="collection">
      <li class="collection-item avatar email-unread">
         <input type="checkbox" />
         <div class="mail-card-el">
            <span class="circle red lighten-1">A</span>
            <span class="email-title">Test card</span>
            <p class="truncate grey-text ultra-small">Summer sale is now going on.</p>
            <a href="#!" class="secondary-content email-time">
            <span class="blue-text ultra-small">12:10 am</span>
            </a>
         </div>
      </li>
   </ul>
</div>

我认为问题在于，“圈子”元素正在做一些影响复选框的事情，导致不显示

#email-list .collection .collection-item.avatar .circle {
    position: absolute;
    width: 42px;
    height: 42px;
    overflow: hidden;
    left: 15px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 1.5rem;
    color: #fff;
    font-weight: 300;
    padding: 10px;
}

我希望实现这样的目标：

我试图“玩”元素的位置，我什么都没有，我做错了什么？

这是我的CodePen

谢谢。

Answer 1

据我所知，你的CSS没什么问题。但是，materialize.min.css将不透明度设置为0。

这是因为Materialize使用自定义复选框（如bootstrap），您不能只在代码中放置默认的HTML-Checkbox。

首先，你应该导入JS-Files。

现在，您需要将您的复选框包装在<input type="checkbox" />-Tags中，而不是只输入：<label>。在您的复选框跟随<span>-Tag之后。

将复选框替换为：

<label>
   <input type="checkbox" />
   <span><!--Text inside here is optional--></span>
</label>

并实现JS-File。这是一个有效的代码示例：

#email-list .collection .collection-item.avatar {
  height: auto;
  padding-left: 72px;
  position: relative;
}

#email-list .collection .collection-item.avatar .secondary-content {
  position: absolute;
  top: 10px;
}

#email-list .collection .collection-item.avatar .secondary-content.email-time {
  right: 8px;
}

#email-list .collection .collection-item.avatar .icon {
  position: absolute;
  width: 42px;
  height: 42px;
  overflow: hidden;
  left: 15px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  top: 20px;
}

#email-list .collection .collection-item.avatar .circle {
  position: absolute;
  width: 42px;
  height: 42px;
  overflow: hidden;
  left: 15px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 1.5rem;
  color: #fff;
  font-weight: 300;
  padding: 10px;
}

#email-list .collection .collection-item.avatar img.circle {
  padding: 0;
}

#email-list .collection .collection-item:hover {
  background: #e1f5fe;
  cursor: pointer;
}

#email-list .collection .collection-item.selected {
  background: #e1f5fe;
  border-left: 4px solid #29b6f6;
}

#email-list .attach-file {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  color: #bdbdbd;
  font-size: 1.1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div id="email-list" class="col s10 m8 l8 card-panel z-depth-1">
  <ul class="collection">
    <li class="collection-item avatar email-unread">
      <label>
        <input type="checkbox" />
        <span></span>
      </label>
      <div class="mail-card-el">
        <span class="circle red lighten-1">A</span>
        <span class="email-title">Test card</span>
        <p class="truncate grey-text ultra-small">Summer sale is now going on.</p>
        <a href="#!" class="secondary-content email-time">
          <span class="blue-text ultra-small">12:10 am</span>
        </a>
      </div>
    </li>
  </ul>
</div>

可以在他们的website上找到指南和文档。

Answer 2

我不太熟悉物化，但他们的CSS有这个：

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

要调整并查看复选框，您需要更改不透明度以及左右位置。就像是：

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
  position: absolute;
  opacity: 1;
  pointer-events: none;
  top: 1px;
  left: 1px;
}

您可以调整顶部和左侧，以便复选框对齐您想要的位置。我还建议在复选框中添加一个类，并使用新的类选择器来更新样式，而不是覆盖materialize文件。

就像是：

<input type="checkbox" class="my-checkbox" />

.my-checkbox {
  position: absolute;
  opacity: 1;
  top: 1px;
  left: 1px;
}

Answer 3

我去了the Materialize documentation，发现它相当无益。他们所说的标签和应用for="inputID"的东西是无关紧要的。我通过在复选框后面添加一个span来实现它： <input type="checkbox" /><span>Checkbox Label</span> 叉笔：https://codepen.io/vipatron/pen/EdYjYx

更新：好的，在我回到它之后，我意识到Materialize承诺“点击”复选框的行为需要使用<label>标记来包装<input>。 （一个例子是在codepen中）。我仍然不太了解for / id应该提供什么行为，但我知道它是语义HTML的好习惯。