Question

我正在尝试将按钮正确对齐作为集合中的辅助内容。但是，无论我尝试什么，我都无法将按钮置于中心位置。见下图：

代码段：

<div class="section">
  <ul class="collection with-header">
    <li class="collection-header">
      <h5>Drawing basics</h5>
    </li>
    <li class="collection-item">
      <div>Public Policy and the Community<a href="#!" class="secondary-content"><i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></a></div>
    </li>
    <li class="collection-item">

      <div> Introduction to Geology Studies
        <button class="btn waves-effect waves-light right"> Create
    
                    </button>
      </div>
    </li>
    <li class="collection-item">
      <div> Global Perspective<a href="#!" class="secondary-content"><i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></a></div>
    </li>

  </ul>

</div>

我该怎么做才能解决这个问题？我几乎尝试了一切。

Answer 1

嗯，我不能按照我的意愿去工作，但它适用于这个硬编码....

.fix{
  float: right;
    margin-top: -8px;
}

https://jsfiddle.net/ggcewqaL/2/

Answer 2

也许这个答案有点晚了，但是这里的修复方法不需要额外的CSS类。

  <ul class="collection with-header">
      <li class="collection-header"><h4>Drawing basics</h4></li>
      <li class="collection-item"><div>Public Policy and the Community<a href="#!" class="secondary-content"><i class="">remove_red_eye</i></a></div></li>
      <li class="collection-item">
          <div>Introduction to Geology Studies
              <a href="#!" class="waves-effect waves-light btn  secondary-content">Create</a>
              </a>
          </div>
      </li>
      <li class="collection-item"><div>Global Perspective<a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></a></div></li>
  </ul>

我刚刚在第二个div中添加了一个定位标记，并使用.btn类对其进行了样式设置

<a href="#!" class="waves-effect waves-light btn  secondary-content">Create</a>

我希望这至少对某人有帮助！

物化集合二级底部未正确对齐

2 个答案: