javascript - 使用 Materialize CSS 并尝试在其父元素内的固定位置放置一个按钮但遇到问题

Question

所以我正在开发一个愚蠢的待办事项列表应用程序，主要使用物化和 jquery。

这是我的代码笔:

http://codepen.io/centraleft/pen/adWvPp

基本上用户输入文本，我的 javascript 获取该文本并创建一个新的列表元素，其中包含一个按钮。我希望按钮始终位于列表项的最右侧，而不管列表元素中的文本如何，所以我将按钮向右浮动但是我遇到了一个问题，我在底部有一个丑陋的黑色小条子我的列表!使用该应用程序一次，您就会看到。

还有其他方法可以完成我想做的事情吗？或者用 CSS 摆脱黑色条子的方法？

这是我当前的按钮 CSS:

.orange {
  bottom: 7px;
  float: right;
  height: 35px;
  width: 35px;
  }

Answer 1

问题是您的 button 超出了您的列表。将您的 li 设置为具有最大高度和 overflow: hidden。看我的fork .

添加(CSS):

.collection-item {
  height: 42px;
  overflow: hidden;
}