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>

我认为问题在于元素“ circle”正在执行某些操作，从而影响了复选框，导致无法显示

#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使用自定义复选框（如引导程序），并且您不能只在代码中放入默认的HTML-复选框。

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

现在，您不仅需要输入<input type="checkbox" />，还需要将复选框包装在<label>-Tags中。选中复选框后，紧跟着<span>-标记。

将您的复选框替换为：

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

并实现JS文件。这是一个工作代码示例：

#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;
}

您可以调整顶部和左侧，以便复选框与所需位置对齐。我还建议将一个类添加到复选框，并使用新的类选择器更新样式，而不是覆盖实现文件。

类似：

<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

更新：好的，我回过头来，我意识到Materialized承诺复选框“单击”的行为确实需要<label>标记来包装<input>。（示例在codepen中）。我仍然不太了解for / id应该提供什么行为，但是我确实知道这是语义HTML的好习惯。

对齐卡内的复选框

3 个答案: