Question

我正在使用Ionic Framework构建应用程序。它使用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

您可以在float: right上使用ul实现这一目标，然后在display:inline上应用li（或浮动：左边或显示：内联块），但有很多可能性对你来说，内联似乎对我来说最容易。最后一点你必须改变你的ul的位置，因为浮动，你必须首先在父块内放置浮动元素。

<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 */

在Ionic Framework中右对齐列表项内容

1 个答案: