1

我有一个包含一些内容和一个按钮的无序列表。列（LI）并不总是相同的高度，但我希望按钮始终位于底部。我正在使用 display: table / display: table-cell 技巧来保持 LI 的高度相同，但是我无法让按钮正确对齐。我想要底部的按钮，但我也希望它的行为像内容一样。这意味着我希望它居中并在调整浏览器大小时更改它的宽度。

这是一个演示这个问题的小提琴。

http://jsfiddle.net/mattymess/BBuqY/

这是一段代码，展示了我是如何做到等高的......

.rewards .rewards-chooser {
  margin: 0;
  border-top: 2px solid #f4f4f4;
  border-bottom: 2px solid #f4f4f4;
  display: table;
  width: 100%;
  position: relative;
}
.rewards .reward {
  width: 25%;
  border-left: 2px solid #f4f4f4;
  list-style: none;
  display: table-cell;
}
4

1 回答 1

0

position: absolute;像这样position: relative;在.rewards .reward .redeem课堂上更改：

.rewards .reward .redeem {
    position: relative;
    bottom: 0;
    box-sizing: border-box;
}

仅供参考：您的按钮与某物（您的容器）相关，而不是绝对的。

要在同一行中设置按钮，您应该为容器范围定义一个高度。像这样的东西：

.reward-description {
    height: 200px;
}

我为你做了一个干净的例子。要查看，请单击此处（jsFiddle）。

于 2013-07-03T17:59:06.870 回答