首页 文章

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

提问于
浏览 次
2

我正在使用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未对齐 . 如何使组件右对齐？

谢谢！

css ionic-framework

1 回答

  • 2

    您可以在 ul 上使用 float: right 实现该功能，然后在 li （或浮点数：左侧或显示：内联块）上应用 display:inline 有很多可能性，但对于您的情况，内联对我来说似乎最容易 . 最后一点你必须改变你的 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 */
    回复于

相关问题