Question

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

请您给我一个提示，告诉我如何按照我上面提到的顺序内联这个项目？

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

您可以使用row和col类来为列表提供所需的外观。例如＆＃34; col col-25＆＃34;将使该列占据屏幕的25％。

Answer 2

另一种选择是使用flexbox来对齐项目内的项目，定义三个部分.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/

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

2 个答案: