如何在DIV周围没有边框

时间：2014-04-22 19:42:48

标签： html css css3

我的页面中有以下DIV：

<div id="leftNavCustom" class="leftMenu">             
    <div class="menu-item">
        <h4><a href="#">Menu</a></h4>
        <ul>
            <li id="u"><a >Why Choose Us</a></li>
            <li id="u"><a >Physicians</a></li>
            <li id="u"><a >Medical Specialties</a></li>
            <li id="u"><a >Locations</a></li>
            <li id="u"><a >Urgent Care</a></li>
            <li id="u"><a >Radiology</a></li>
            <li id="u"><a >Lab</a></li>
        </ul>
    </div>
</div>

在菜单扩展器上创建一个鼠标悬停。

我的CSS如下：

#leftNavCustom {
    display: block;
    z-index: 5;
    font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
    line-height: 1.5;
    margin: 0;
    width: 240px;
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    padding: 0;
    background: #00ff00;
}
.leftMenu {
    position: fixed;
    left: 22px;
    top: 65px;
    margin: 0;
    padding: 0;
}
.menu-item, .menu-item2 {
    background: url('../theImages/bg_80_b.png');
    width: 240px;
    font-family: 'nexa_boldregular';
    font-size: 19px;
    margin: 0;
    padding: 0;
    text-align: left;
}

/*Menu Header Styles*/
.menu-item h4 {
    border-bottom: 1px solid rgba(0,0,0,0.3);
    border-top: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 7px 12px;

    /*Gradient*/
    background: #e73827; /* Old browsers */
    background: -moz-linear-gradient(top, #e73827 0%, #f02f17 29%, #f6290c 47%, #f27c32 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e73827), color-stop(29%,#f02f17), color-stop(47%,#f6290c), color-stop(100%,#f27c32)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* IE10+ */
    background: linear-gradient(to bottom, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e73827', endColorstr='#f27c32',GradientType=0 ); /* IE6-9 */
}

/*Menu Header Styles*/
.menu-item2 h4 {
    border-bottom: 1px solid rgba(0,0,0,0.3);
    border-top: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 7px 12px;

    /*Gradient*/
    background: #036ca9; /* Old browsers */
    background: -moz-linear-gradient(top,  #036ca9 0%, #025c90 44%, #00466e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#036ca9), color-stop(44%,#025c90), color-stop(100%,#00466e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #036ca9 0%,#025c90 44%,#00466e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #036ca9 0%,#025c90 44%,#00466e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #036ca9 0%,#025c90 44%,#00466e 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #036ca9 0%,#025c90 44%,#00466e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#036ca9', endColorstr='#00466e',GradientType=0 ); /* IE6-9 */
}

.menu-item h4:hover {  
    background: #f27c32; /* Old browsers */
    background: -moz-linear-gradient(top, #f27c32 0%, #f6290c 53%, #f02f17 71%, #e73827 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f27c32), color-stop(53%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f27c32', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */
}

.menu-item2 h4:hover {  
    background: #00a3cc; /* Old browsers */
    background: -moz-linear-gradient(top,  #00a3cc 0%, #005a6e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a3cc), color-stop(100%,#005a6e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #00a3cc 0%,#005a6e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #00a3cc 0%,#005a6e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #00a3cc 0%,#005a6e 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #00a3cc 0%,#005a6e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3cc', endColorstr='#005a6e',GradientType=0 ); /* IE6-9 */

}

.menu-item h4 a, .menu-item2 h4 a {
    color: white;
    display: block;
    text-decoration: none;
    width: 240px;
}

/*ul Styles*/
.menu-item ul {
    background: url('theImages/bg_80_b.png');
    font-size: 13px;
    line-height: 30px;
    height: 0px;
    list-style-type: none;
    overflow: hidden;
    padding: 0px;

    *Animation*/
    -webkit-transition: height 1s ease;
    -moz-transition: height 1s ease;
    -o-transition: height 1s ease;
    -ms-transition: height 1s ease;
    transition: height 1s ease;
}

.menu-item:hover ul {
    width: 240px;
    height: 300px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

.menu-item ul li#u a {
    color: #fff;
    cursor: pointer;
    display: block;
    height: 25px;
    line-height: 25px;
    text-indent: 0px;
    text-decoration: none;
    width: 100%;
    font-family: 'nexa_boldregular';
    font-size: 19px;
}

/*li Styles*/
.menu-item li#u {
    border-bottom: 1px #13476F solid;
    padding: 8px;
}

.menu-item li#u:hover {
    background: #5196AB;
}
.menu-item li#firstOne {
    display: absolute;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    text-align: center;
    height: 75px;
    line-height: 75px;
    border-bottom: 1px solid #FF7263;
    vertical-align: middle;
}
.menu-item li#firstOne img {
    vertical-align: middle;
}

默认情况下，它会在菜单周围创建一个大空间，如下所示：

enter image description here

菜单出现的唯一方式就像我想的那样：

enter image description here

是将以下样式添加到上面的css文件中：

* {
     margin: 0;
     padding: 0;
}

但这使得我页面上的其他DIVS不合适。我尝试在我的CSS中为每个代码添加边距和填充，但没有添加上面显示的几行，没有任何效果。

如何修改现有的css代码来修复它？

JSFIDDLE：http://jsfiddle.net/s2z6f/

2 个答案:

答案 0 :(得分：4)

从不应该拥有它的特定元素（h4和ul .menu-item）中删除边距。您可以这样做，而不是使用*作为选择器。

.menu-item h4, .menu-item ul {
    margin: 0;
}

http://jsfiddle.net/v9xp2/

答案 1 :(得分：1)

尝试使用CSS重置开始。 http://meyerweb.com/eric/tools/css/reset/

这将＆＃34;归零＆＃34;各个浏览器自动引入的所有属性。如果您要编写大量自定义样式，这通常是一种很好的做法。

相关问题
最新问题