如何右对齐最后一个？答案

【问题标题】：How to right align last li?如何右对齐最后一个？
【发布时间】：2018-10-21 19:44:39
【问题描述】：

我正在尝试使用 CSS 右对齐 <div class="right-align">（最后一个 <li>）。我确实尝试执行以下操作，但没有成功。

我需要能够使<ul class="third-level"> 的高度自动调整为<div class="right-align"> 的高度，具体取决于内部内容的长度。

如何右对齐最后一个 <li>？

由于<div class="right-align">的高度，我尝试过但没有奏效

.third-level {
  position: relative;
  
}

.third-level li:last-child {
  position: absolute;
  right: 0;
}

<ul class="third-level">
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
          <li >
            <div class="right-align">
            <img src="https://via.placeholder.com/350x150">
            <h5>Image placeholder</h5>
            <p>Collaboratively matrix parallel growth strategies rather than emerging "outside the box" thinking. </p>
            
            <a href="#some-path">Some path</a>
            </div>
          </li>
        </ul>

当前问题：

想要的输出：

【问题讨论】：

是的，您不会真正喜欢那些基于此标记的解决方案。我强烈建议您使用不同的标记来获得所需的布局。它会更干净，更易于维护。
@cale_b 您是否有一个示例标记作为答案提出来？很难想象推荐的标记是什么。
当然可以。首先，您的图像似乎表示两列。为什么不创建两列来显示数据？您可以放弃 ul 和 li 并简单地使用 div 容器来创建所需的布局，或者如果您认为列表标记很重要，您可以将其嵌套在附加列表中，例如：`
- 重置
- 网格
- Frameworks

【解决方案1】：

为.third-level li:last-child 设置固定宽度。像 200px 或 50% 和 top: 0; 将其与顶部对齐。

.third-level {
  position: relative;
  
}

.third-level li:last-child {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
}

<ul class="third-level">
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
          <li >
            <div class="right-align">
            <img src="https://via.placeholder.com/350x150">
            <h5>Image placeholder</h5>
            <p>Collaboratively matrix parallel growth strategies rather than emerging "outside the box" thinking. </p>
            
            <a href="#some-path">Some path</a>
            </div>
          </li>
        </ul>

【讨论】：

虽然这确实将其移动到右侧，但它并没有将其与顶部对齐，如desired output 屏幕截图所示。 right-align 元素的顶部有一个间隙。
@usernameabc 我已经编辑了我的答案。添加顶部：0；对齐到顶部。
是的，它现在正在工作。我错过了您添加的一些属性，例如top。

【解决方案2】：

您可以使用 CSS Grid 实现类似的效果：

.third-level {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

<ul class="third-level">
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
          <li >
            <div class="right-align">
            <img src="https://via.placeholder.com/350x150">
            <h5>Image placeholder</h5>
            <p>Collaboratively matrix parallel growth strategies rather than emerging "outside the box" thinking. </p>
            
            <a href="#some-path">Some path</a>
            </div>
          </li>
        </ul>

【讨论】：

使用display: grid时会出现这个问题：Safari does not yet support intrinsic and extrinsic sizing with grid properties such as grid-template-rows。 caniuse: display: grid。你有没有用另一个属性克服这个问题>
@usernameabc 我很确定这是指诸如 min-content 和 max-content 之类的值，在我的示例中未使用。这对我来说在 Safari 上运行良好。
您使用的是什么版本的 Safari？当我查找min-content 时，在已知问题选项卡下显示Safari does not yet support usage with CSS Grid Layout properties such as grid-template-rows.
@usernameabc 不支持将 min-content 与 grid-template-rows 一起使用。 min-content不在我的例子中，也不需要达到你想要的效果。

【解决方案3】：

我会使用 CSS flex 属性来实现这一点。正如@cale_b 在您的 cmets 中提到的那样，强烈建议您为您真正想要的设计更改那个毫无意义的标记。

.third-level {
  display:flex;
  flex-flow:row wrap;
  width:100%;
  background: #b9deb9;
  padding:0; margin:0;
}

.third-level > div {
  flex-grow:1;
  
  border:1px solid red;
  margin:2px;
  width:45%;
}

.right-align{
}

<ul class="third-level">
          <div><a href="#">Resets</a></div>
          <div><a href="#">Frameworks</a></div>
          <div><a href="#">Grids</a></div>
          <div class="right-align">
            <img src="https://via.placeholder.com/350x150">
            <h5>Image placeholder</h5>
            <p>Collaboratively matrix parallel growth strategies rather than emerging "outside the box" thinking. </p>
            
            <a href="#some-path">Some path</a>

          </div>
        </ul>

【讨论】：