Question

我在每个列表项中都有三个按钮，我想在右侧显示它们，但是如果我添加"item item-button-right"项目向右移动但相互溢出然后看起来像一个按钮。我尝试了<ul></ul>，但按钮位于项目文字下方。

html
         <ion-list>
                    <ion-item class="item item-button-right">
                        Make and Model:
                        <ul>
                        <button class="button button-positive">
                            <i class="icon ion-checkmark-round"></i>
                        </button>
                        <button class="button button-positive">
                            <i class="icon ion-close-round"></i>
                        </button>
                        <button class="button button-positive">
                            <i class="icon ion-ios-camera"></i>
                        </button>
                        </ul>
                    </ion-item>
                    <ion-item class="item-positive" href="#/app/checklist">
                         Next
                    </ion-item>
        </ion-list>

提前致谢。

Answer 1

我添加了一个CodePen来通过CSS演示一个解决方案。

相关添加的CSS：

.item.moreButtons button { margin-top: -5px; } /* first */
.item.moreButtons button:nth-child(2) { margin-top: 35px; } /* second */
.item.moreButtons button:last-child { margin-top: 75px; } /* thrid */

另外，不要忘记在<ion-item>元素上设置类，如下所示：

<ion-item class="item item-button-right moreButtons">

使用item-button-right时，列表项中的按钮溢出

1 个答案: