如何在离子中格式化此列表？

Question

我有以下列表显示：一个图标、用户图片、名称和左侧的 2 个图标。我无法在 ionic 中正确对齐，即使我添加样式也无法修复它们。

你能给我一个提示，如何让这个项目按照我上面提到的顺序内联吗？

<div class="list">
     <a class="item item-icon-left item-icon-right" href="#" style="margin-top:40px;">
                            <i class="icon ion-person"></i>
                            <img class="circular-image" src="/Content/img/bill.jpg" />
                            <h2 style="display:inline; padding-left:10px;">F.joe</h2>
                            <i class="icon ion-chatbubble-working"></i>

                        </a>

                        <a class="item item-icon-left item-icon-right" href="#">
                            <i class="icon ion-person"></i>
                            <img class="circular-image" src="/Content/img/bill.jpg" />
                            <h2 style="display:inline; padding-left:10px;">F.joe</h2>
                            <i class="icon ion-chatbubble-working"></i>
                        </a>

                    </div>

Answer 1

我建议使用 Ionic 的网格 CSS 组件：

http://ionicframework.com/docs/components/#grid

尝试这样的事情：

    <ion-list>
        <ion-item>
            <div class="row">
                <div class="col">
                    <i class="icon ion-person"></i>
                </div>
                <div class="col">
                    <img class="circular-image" src="/Content/img/bill.jpg" />
                </div>
                <div class="col">
                    <h2>F.joe</h2>
                </div>
                <div class="col">
                    <i class="icon ion-chatbubble-working"></i>
                </div>
            </div>
        </ion-item>
    </ion-list>

您可以随意调整行和列类以使您的列表具有您想要的外观和感觉。例如 "col col-25" 将使该列占据屏幕的 25%。

Answer 2

另一种方案是使用flexbox来对齐item内部的item，定义三个部分.item-content-left，item-content-center（用flex-grow来扩展）和.item-content-right

但对于更简单的事情，我会采用 Jake Stewart 方法。

 <div class="list">
     <a class="item" href="#" >
         <div class='item-content'>
         <div class='item-content-left'>
              <i class="icon ion-person"></i>
         </div>
          <div class='item-content-center'>
               <img class="circular-image" src="/Content/img/bill.jpg" />
                <h2 >F.joe</h2>
          </div>                  
         <div class='item-content-right'>
             <i class="icon ion-chatbubble-working"></i>
              <i class="icon ion-chatbubble-working"></i>
         </div>
         </div>
   </a>
</div>

CSS

.item-content{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

    align-items: flex-start;
    -webkit-align-items:  flex-start; 
}

.item-content-left{

}
.item-content-right{

}
.item-content-center{
    flex-grow: 1;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

    align-items: flex-start;
    -webkit-align-items:  flex-start; 
}

http://jsfiddle.net/6Lvu98pb/3/

如何在离子中格式化此列表？

How to format this list in ionic?

html

css

ionic-framework