css - 在 Ionic 框架中右对齐列表项内容

Question

我正在使用 Ionic 框架构建一个应用程序。它使用 AngularJS 和 CSS。在我的应用程序中，我需要显示元素列表。每个元素都需要如下所示:

+------------------------------------------+
| Item Title                         123   |
| one line of text                         |
| a seperate line of text                  |
+------------------------------------------+

除了右对齐的数字之外，我的一切都正常。这些数字实际上是一个 ul。这是设计使然。它们将是颜色不同的字体图标。目前，我只是想让定位发挥作用。目前，我正在尝试以下操作:

<div class="list">
  <a class="item" style="left:0; right:0" ng-repeat="item in items">
    <h2>{{item.title}}</h2>
    <p class="second-point">{{item.textA}}</p>
    <p class="third-point">{{item.textB}}</p>

    <ul class="row">
      <li class="col">1</li>
      <li class="col">2</li>
      <li class="col">3</li>
    </ul>
  </a>              
</div>

渲染后，数字将显示在前三个文本项下方的一行上。 ul 未右对齐。如何使组件右对齐？

谢谢!

Answer 1

您可以在 ul 上使用 float: right 来实现这一点，然后在 li 上应用 display:inline (或 float:left 或 display:inline-block)有很多可能性，但对于我的情况来说，内联似乎是最简单的。最后一点，由于 float ，您必须更改 ul 的位置，您必须首先将 float 元素放在父 block 内。

<div class="list">
    <a class="item" style="left:0; right:0" ng-repeat="item in items">
        <ul class="row">
            <li class="col">1</li>
            <li class="col">2</li>
            <li class="col">3</li>
        </ul>
        <h2>{{item.title}}</h2>
        <p class="second-point">{{item.textA}}</p>
        <p class="third-point">{{item.textB}}</p>
    </a>              
</div>


    /*ul*/.row {
        float:right;
    } /* no need to precise your selector just a reminder */

    .row > li {
        display:inline;
    } /* selector for the "first child" li of ul, don't gonna apply on
    li inside your li, of course your can use .col like selector */