html - 将列表与另一个元素内联

Question

我想要完成的是让一个列表与另一个元素内联，但该元素位于容器末尾的最右边。

像这样:

我正在使用 Bootstrap 3。但如果我可以用 CSS 来实现，我会更喜欢它。我也试过用 inline 内联它，但文本会粘在列表上，我不知道如何在不触及边距的情况下将它移开。左右浮动让文字爬到顶部，这不是我需要的。

你们知道我能做到这一点的最佳方法是什么吗？

这是我的代码大纲:

ul {
  list-style: none;
  padding: 0;
}

<div class="col-md-6">
  <ul>
    <li>List</li>
    <li>List</li>
    <li>List</li>
  </ul>
  <p>Text</p>
</div>

谢谢!

Answer 1

您可以将所有内容放入包含 UL 和 P 元素的容器中。 .someContainer position 将设置为 relative 然后将 position:absolute 分配给 p 元素并分配 bottom 和 right 为 0。

ul {
  list-style: none;
  padding: 0;
}
.someContainer {position:relative;border:1px solid #ff0000;}
.someContainer p {right:0;bottom:0;position:absolute;}

<div class="col-md-6">
  <div class="someContainer">
    <ul>
      <li>List</li>
      <li>List</li>
      <li>List</li>
    </ul>
    <p>Text</p>
  </div>
</div>