对齐卡片内的复选框

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

我想实现这样的目标：

我试图 "play" 元素的位置，但我什么也没得到，我做错了什么？

这是我的CodePen

谢谢。

Answer 1

我不太熟悉 materialize，但是他们的 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;
}

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

类似于：

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

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

Answer 2

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

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

首先你应该导入 JS-Files.

现在，您需要将复选框包裹在 <label>-Tags 中，而不仅仅是键入：<input type="checkbox" />。在您的复选框后跟一个 <span>-Tag.

将您的复选框替换为：

<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 3

我去了 the Materialize documentation，发现它毫无帮助。他们所说的关于标签和应用 for="inputID" 的东西是无关紧要的。我通过在复选框后添加 span 使其工作： <input type="checkbox" /><span>Checkbox Label</span> 分叉笔： https://codepen.io/vipatron/pen/EdYjYx

更新：好的，在我回到它之后，我意识到 Materialise 承诺 "on click" 复选框的行为确实需要 <label> 标签来包装 <input>。（代码笔中有一个例子）。我仍然不太了解 for/id 应该提供什么行为，但我知道这是语义 HTML.

的好习惯

对齐卡片内的复选框

Align checkbox inside a card

html

css

materialize