删除CSS中两个矩形之间的间隙
我创建了一个带有jquery和CSS的菜单项，但在菜单项中有一个间隙..一个项目放在顶部op其他的迭代..我想删除这个间隙并按照我所示的每个点亮litle在图像中。我怎么能这样做？
这是菜单项的图像......
这是我的CSS文件
*{
margin:0;
padding:0;
}
body{
background:#000;
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size:15px;
color: #fff;
text-transform:uppercase;
overflow-x:hidden;
}
.oe_overlay{
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
ul.oe_menu{
list-style:none;
position:relative;
margin:60px 0px 0px 40px;
width:967px;
float:left;
clear:both;
}
ul.oe_menu > li{
width:112px;
height:50px;
padding-bottom:2px;
float:left;
position:relative;
}
ul.oe_menu > li > a{
display:block;
background-color:#101010;
color:#aaa;
text-decoration:none;
font-weight:bold;
font-size:12px;
width:138px;
height:30px;
padding:10px;
margin:1px;
text-shadow:0px 0px 1px #000;
opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background:#fff;
color:#101010;
opacity:1.0;
}
.oe_wrapper ul.hovered > li > a{
background:#fff;
text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div{
position:absolute;
top:50px;
left:1px;
background:#fff;
width:967px;
height:180px;
padding:30px;
display:none;
}
ul.oe_menu div ul li a{
text-decoration:none;
color:#222;
padding:2px 2px 2px 4px;
margin:2px;
display:block;
font-size:12px;
}
ul.oe_menu div ul.oe_full{
width:100%;
}
ul.oe_menu div ul li a:hover{
background:#000;
color:#fff;
}
ul.oe_menu li ul{
list-style:none;
float:left;
width: 150px;
margin-right:10px;
}
li.oe_heading{
color:#aaa;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
}
这是我的HTML
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="" />
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Aller.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('ul.oe_menu div a',{hover: true});
Cufon.replace('h1,h2,.oe_heading');
</script>
<style type="text/css">
span.reference{
position:fixed;
left:0px;
bottom:0px;
background:#000;
width:100%;
font-size:10px;
line-height:20px;
text-align:right;
height:20px;
-moz-box-shadow:-1px 0px 10px #000;
-webkit-box-shadow:-1px 0px 10px #000;
box-shadow:-1px 0px 10px #000;
}
span.reference a{
color:#aaa;
text-transform:uppercase;
text-decoration:none;
margin-right:10px;
}
span.reference a:hover{
color:#ddd;
}
.bg_img img{
width:100%;
position:fixed;
top:0px;
left:0px;
z-index:-1;
}
h1{
font-size:75px;
text-align:right;
position:absolute;
right:40px;
top:20px;
font-weight:normal;
/*text-shadow: 0 0 3px #0096ff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #0096ff, 0 0 70px #0096ff, 0 0 80px #0096ff, 0 0 100px #0096ff, 0 0 150px #0096ff;
*/}
h1 span{
display:block;
font-size:15px;
font-weight:bold;
}
h2{
position:absolute;
top:220px;
left:50px;
font-size:40px;
font-weight:normal;
/*text-shadow: 0 0 3px #f6ff00, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #f6ff00, 0 0 70px #f6ff00, 0 0 80px #f6ff00, 0 0 100px #f6ff00, 0 0 150px #f6ff00;
*/}
</style>
</head>
<body>
<div class="bg_img"><img src="images/1.jpg" alt="background" /></div>
<h1>Duke Fashion<span>Overlay Effect Menu with jQuery</span></h1>
<h2>Welcome to the world of fashion</h2>
<div class="oe_wrapper">
<div id="oe_overlay" class="oe_overlay"></div>
<ul id="oe_menu" class="oe_menu">
<li><a href="">Collections</a>
<div>
<ul>
<li class="oe_heading">Summer 2011</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Special Events</a></li>
<li><a href="#">Runway Show</a></li>
<li><a href="#">Overview</a></li>
</ul>
<ul>
<li class="oe_heading">Winter 2010</li>
<li><a href="#">Milano</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">Behind the scenes</a></li>
<li><a href="#">Interview</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Download</a></li>
</ul>
<ul>
<li class="oe_heading">Categories</li>
<li><a href="#">Casual</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Underwear</a></li>
<li><a href="#">Nature Pure</a></li>
<li><a href="#">Swimwear</a></li>
<li><a href="#">Evening</a></li>
</ul>
</div>
</li>
<li><a href="">Projects</a>
<div style="left:-111px;"><!-- -112px -->
<ul>
<li class="oe_heading">Fashion Shows</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Events</li>
<li><a href="#">Fashion Party 2011</a></li>
<li><a href="#">Evening specials</a></li>
<li><a href="#">Fashion Day Milano</a></li>
<li><a href="#">Model Workshops</a></li>
</ul>
<ul>
<li class="oe_heading">Media</li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Contest 2011</a></li>
<li><a href="#">Fashion Mania</a></li>
<li><a href="#">Green Earth Day</a></li>
</ul>
</div>
</li>
<li><a href="">Fragrances</a>
<div style="left:-223px;">
<ul class="oe_full">
<li class="oe_heading">Fashion Fragrances</li>
<li><a href="#">Deálure</a></li>
<li><a href="#">Violet Woman</a></li>
<li><a href="#">Deep Blue for Men</a></li>
<li><a href="#">New York, New York</a></li>
<li><a href="#">Illusion</a></li>
</ul>
</div>
</li>
<li><a href="">Events</a>
<div style="left:-335px;">
<ul>
<li class="oe_heading">Shows 2010</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Shows 2011</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Special Events</li>
<li><a href="#">Fashion Party 2011</a></li>
<li><a href="#">Fashion Countdown Party 2010</a></li>
<li><a href="#">Fashion Day Milano</a></li>
<li><a href="#">Model Workshops</a></li>
</ul>
</div>
</li>
<li><a href="">Stores</a>
<div style="left:-447px;">
<ul>
<li class="oe_heading">Europe</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Asia</li>
<li><a href="#">Hong Kong</a></li>
<li><a href="#">Tokio</a></li>
<li><a href="#">New Delhi</a></li>
<li><a href="#">Beijing</a></li>
</ul>
<ul>
<li class="oe_heading">United States</li>
<li><a href="#">New York</a></li>
<li><a href="#">Los Angeles</a></li>
<li><a href="#">Seattle</a></li>
<li><a href="#">Miami</a></li>
</ul>
</div>
</li>
<li><a href="">My table</a>
<div style="left:-559px;">
<ul>
<li class="oe_heading">Europe</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Asia</li>
<li><a href="#">Hong Kong</a></li>
<li><a href="#">Tokio</a></li>
<li><a href="#">New Delhi</a></li>
<li><a href="#">Beijing</a></li>
</ul>
<ul>
<li class="oe_heading">United States</li>
<li><a href="#">New York</a></li>
<li><a href="#">Los Angeles</a></li>
<li><a href="#">Seattle</a></li>
<li><a href="#">Miami</a></li>
</ul>
</div>
</li>
<li><a href="">Admin</a>
<div style="left:-671px;">
<ul>
<li class="oe_heading">Europe</li>
<li><a href="#">Milano</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Berlin</a></li>
<li><a href="#">London</a></li>
</ul>
<ul>
<li class="oe_heading">Asia</li>
<li><a href="#">Hong Kong</a></li>
<li><a href="#">Tokio</a></li>
<li><a href="#">New Delhi</a></li>
<li><a href="#">Beijing</a></li>
</ul>
<ul>
<li class="oe_heading">United States</li>
<li><a href="#">New York</a></li>
<li><a href="#">Los Angeles</a></li>
<li><a href="#">Seattle</a></li>
<li><a href="#">Miami</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div>
<span class="reference">
<a href="http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/">back to the Codrops tutorial</a>
<a href="http://www.flickr.com/photos/duke9042004/" target="_blank">Background image by Duke Photo</a>
</span>
</div>
1 个答案:
答案 0 :(得分：2)
使用Firebug，Chrome或其他带有Web开发人员工具的浏览器在Firefox中加载您的页面。然后使用开发人员工具开始修改边距，填充等。这是解决CSS问题的最简单方法，因为您可以在页面上看到您所做更改的即时反馈。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？