Question

我是移动节目的新手，我在kendo-ui中发现了一些css问题。

1-如何消除可折叠菜单1周围的灰色边框？ 2-我在每个部分都无法将边界设为0 ... 第9节下面的3-是一个宽灰色区域......无法将其设置为整个菜单的深灰色。

以下代码：

＆＃13;

<div data-role="drawer" id="app-drawer" class="drawer-menu">
    <div data-role=header>
        <div data-role="content" class="drawer-profile">

            <a href="views/profile.html" data-role="button" style="color: yellow; horizontal-align: middle">edit</a>
        </div>
    </div>
        <ul data-role="listview" class="drawer-menu">
            
            <li class="drawer-li drawer-menu">
                <div data-role="collapsible" class="drawer-collapsible drawer-menu km-icon-right">
                    <h3 style="font-weight: normal" class="drawer-menu">1...</h3>
                    <ul data-role="listview" data-inset="false">
                        <li class="drawer-menu"><a href="views/nearme.html?##Search=nearme">11</a></li>
                        <li class="drawer-menu"><a href="views/nearme.html?##Search=address">12</a></li>
                        <li class="drawer-menu"><a href="views/categorylist.html">13</a></li>
                        <li class="drawer-menu"><a href="#">Serviços on-line</a></li>
                    </ul>
                </div>
            </li>
            
            <li class="drawer-menu"><a href="views/promolist.html">2</a></li>
            <li class="drawer-menu"><a href="#">3</a></li>
            <li class="drawer-menu"><a href="#">4</a></li>
            <li class="drawer-menu"><a href="#">5</a></li>
            <li class="drawer-menu"><a href="#">6</a></li>
            <li class="drawer-menu"><a href="#">7</a></li>
            <li class="drawer-menu"><a href="#">8</a></li>
            <li class="drawer-menu"><a href="#">9</a></li>
        </ul>
</div>

＆＃13;

.drawer-li {
    padding: 0 !important;
    border-width: 0 !important;
    
}
.drawer-collapsible {
    margin: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-width: 0 !important;
}
.drawer-collapsible h3 a {
    border-radius: 0 !important;
    border-width: 0 !important;
    border-bottom-width: 0 !important;
}
.drawer-profile {
    background: #34393D;
    height: 90px;
    /* opacity: 0.5; */
    font: Segoe !important;
    border-width: 0px !important;
}
.drawer-menu {
    background: #34393D !important;
    color: white;
    font: Segoe !important;
    border-width: 0px !important;

＆＃13;

Answer 1

没有人回答这个问题，但我可以弄明白如何自己解决。我发布解决方案只是为了帮助任何有同样疑问的人。

＆＃13;

.drawer-menu li {
    background: #34393D !important;
    color: white;
    font: Segoe !important;
    font-size: 14px;
    border-width: 0px !important;
}

.drawer-menu div {
    background: #34393D !important;
    color: white;
    font: Segoe !important;
    font-size: 14px;
    border-width: 0px !important;
    padding-left: 5px;
    padding-right: 5px;
}

＆＃13;

为不能正常工作配置类，也不为。所以我为孩子们和班级里面设置了css＆＃34; .drawer-menu＆＃34;这归功于app-drawer。附加图像的结果： drawer menu solved

Kendo-ui app抽屉css配置

1 个答案: