Question

我无法弄清楚如何在容器底部对齐最后一个<li>元素。我发现的问题是，由于column-count和column-fill，内容自动适应了列，使我无法根据需要定位最后一个元素。我尝试使用padding-top，margin-top和line-height，但结果始终相同。有办法解决这个问题吗？

这是我的意思的示例：

* { font-family: Sans-serif }
.table1 { border: 1px solid red }

.table2 { border: 1px solid red }

.title-list { column-count: 2 }

.title-list li { margin-bottom: 10px }

.title,
.title:hover {
    border-bottom: 1px solid #cae3f7;
    text-decoration: none;
    color: black
}

.more1 {
  list-style-type: none;
  margin-left: -15px
}
.more2 {
  list-style-type: none;
  margin-left: -15px;
  padding-top: 30px
}

<body>
  <p><b>I want to align the last link at the bottom of the div</b></p>
  <div class="table1">
    <ol class="title-list">
      <li><a class="title" href="#">I'm the first title</a></li>
      <li><a class="title" href="#">I'm the second title</a></li>
      <li><a class="title" href="#">I'm the third title</a></li>
      <li><a class="title" href="#">I'm the fourth title</a></li>
      <li><a class="title" href="#">I'm the fifth title</a></li>
      <li><a class="title" href="#">I'm the sixth title</a></li>
      <li><a class="title" href="#">I'm the seventh title</a></li>
      <li><a class="title" href="#">I'm eighth title </a></li>
      <li class="more1"><a href="#">Show me more >>></a></li>
    </ol>
  </div>
  <p><b>But when I do this the columns change </b></p>
  <div class="table2">
    <ol class="title-list">
      <li><a class="title" href="#">I'm the first title</a></li>
      <li><a class="title" href="#">I'm the second title</a></li>
      <li><a class="title" href="#">I'm the third title</a></li>
      <li><a class="title" href="#">I'm the fourth title</a></li>
      <li><a class="title" href="#">I'm the fifth title</a></li>
      <li><a class="title" href="#">I'm the sixth title</a></li>
      <li><a class="title" href="#">I'm the seventh title</a></li>
      <li><a class="title" href="#">I'm the eighth title </a></li>
      <li class="more2"><a href="#">Show me more >>></a></li>
    </ol>
  </div>
</body>

Answer 1

/* the container */
.table-1 {
  position: relative;
}

li:last-of-type {
  position: absolute;
  right: 0;
  bottom: 0;
}

将最后一个li对准容器底部

1 个答案: