Question

我在侧边菜单中使用了以下代码：

<ion-side-menu side="left">
    <ion-content>
        <div class="list">
            <a class="item" menu-close href="#/app/products">
                <img src="img/home.png" width="30px" />
                <!-- <i class="icon ion-home"></i> -->
                <h2>YourPhoto24</h2>
            </a>
            <a class="item" menu-close href="#/app/account">
                <img src="img/profile.png" width="30px" />
                <h2>mein Konto</h2>
            </a>
            <a class="item" menu-close href="#/app/orders">
                <img src="img/orders.png" width="30px" />
                <h2>meine Bestellungen</h2>
            </a>
            <a class="item" menu-close href="#/app/receivers">
                <img src="img/receivers.png" width="30px" />
                <h2>meine Empfänger</h2>
            </a>
            <a class="item" menu-close href="#/app/email">
                <img src="img/email.png" width="30px" />
                <h2>Email an uns</h2>
            </a>
            <a class="item" menu-close href="#/app/recommend">
                <img src="img/recommend.png" width="30px" />
                <h2>Empfehlen Sie uns weiter
                    <p>mein Guthaben beträgt zur Zeit: </p>
                </h2>

            </a>
            <a class="item" menu-close href="#/app/siteNotice">
                <img src="img/laws.png" width="30px" />
                <h2>AGB &amp; Impressung</h2>
            </a>
        </div>
    </ion-content>
</ion-side-menu>

所以我想在左边有一个图标，右边的文字是垂直居中的。不幸的是我没有得到我预期的结果：

enter image description here

1：如何设法在图片和文字之间留出更多空间，以及如何将文字垂直居中？

2：如何隐藏分隔线？

3：如何增加列表项的顶部和底部填充？我希望它们是40px。

我将以下内容添加到我的css文件中：

.menu.menu-left, .list a {
    border-color: transparent;
    padding-top: 30px;
    padding-bottom: 30px;
}

.menu.menu-left, .list img {
    float: left;
    vertical-align: middle;
}

.menu.menu-left, .list h2 {
    display: inline-block;
}

分区的填充和隐藏与该代码一起使用。但我不能设法将图像旁边的文本垂直居中对齐（两者都应垂直居中，图像和文本！）

剩下的是：我如何设法在图像和文本之间获得更多空间？如何将文本垂直居中？

Answer 1

Ionic已经提供很多来做他们已经制作的样式。在他们的文档中查看this example。：

- (NSArray*)generateRandomNumber{
NSMutableArray *unqArray=[[NSMutableArray alloc]init];
int randNum;
int counter = 0;
while (counter< 6) {
    randNum = arc4random_uniform(40.0);
    if (![unqArray containsObject:[NSNumber numberWithInt:randNum]]) {
        [unqArray addObject:[NSNumber numberWithInt:randNum]];
        counter++;
    }
}
return unqArray.copy;
}

- (IBAction)button:(id)sender {
NSArray *results = nil;
results = [self generateRandomNumber];
}

这是一个用于展示你想要的东西的小代码：

http://codepen.io/anon/pen/ZGBegG

离子列表：如何编辑列表项的样式？

1 个答案: