Css 如何使列表看起来像iphone菜单

我需要一个类似iphone菜单的列表，看到这张图片了吗

我的清单是这样的

我不能得到同样的表情

我的js代码

var store = new Ext.data.JsonStore({
        model  : 'Contact',    
        getGroupString : function(record) {
            return record.get('menu')[0];
        },

        data: [
            {menu: '<img src="images/summary2.png" height="42" width="42" /> Shipment Summary ',item:'1'},
                {menu: '<img src="images/detail2.png" height="42" width="42" /> Shipment Details ',item:'2'},
            {menu: '<img src="images/documents2.png" height="42" width="42" /> Shipment Documents ',item:'3'}
        ]
    });

    SL.views.mainMenuBottomBar = new Ext.List
    ({
            id: 'MBB',
            fullscreen: false,
            centered: true,
            cls: 'settingscls',
            disableSelection: true,
            scroll: false,
            dock: 'bottom',
            itemTpl : '<tpl for="."><div class="x-list-group-items">{menu}</div></tpl>',
            grouped : false,
            indexBar: false,
            onItemDisclosure: 
                    function(record)
                   {
                        if(record.get('item')=='1')               {
                       }
                        ...
                   },
       store: store
    });

-在css中，我无法将边框应用于第一个和最后一个项目列表

-文本显示在垂直对齐底部

-字体与iphone菜单不同

-右边距或填充物起作用

请帮帮我

---

提前谢谢你

查看Sencha Touch论坛上提出的类似问题：-

输出：-

---

查看Sencha Touch论坛上提出的类似问题：-

输出：-

---

确保您的容器左右都有填充，并且ul显示为块元素，如下所示：

确保您的容器左右都有填充，并且ul显示为块元素，如下所示：

谢谢您的回复，但我无法将边框应用于第一个和最后一个项目列表谢谢您的回复，但我无法将边框应用于第一个和最后一个项目列表谢谢您的回复，但我无法将边框应用于我代码中的第一个和最后一个项目列表。是的，您可以。使用jQuery并使用适当的选择器。谢谢您的回复，但我无法将边框应用于我代码中的第一个和最后一个项目列表。是的，您可以。使用jQuery并使用适当的选择器。

.settingscls
{
    background:transparent;
}
.settingscls .x-list-disclosure
{
        margin-top:0.6em;
        right:1em !important;
        -webkit-mask:none;
        -webkit-mask-box-image: url('images/list-arrow.png');
}
.settingscls .x-list-item
{
    background:white;
    left:10px;
    right:10px;
    bottom:10px;
     -webkit-border-top-left-radius: 0.4em ;
         -webkit-border-top-right-radius: 0.4em;
     -webkit-border-bottom-left-radius: 0.4em;
         -webkit-border-bottom-right-radius: 0.4em;
}