我的 CSS 下拉菜单和右边框之间有一个空格。如何删除它？
Posted
技术标签:
【中文标题】我的 CSS 下拉菜单和右边框之间有一个空格。如何删除它？【英文标题】：My CSS drop down menu has a space between it and the right border. How do I remove it? 【发布时间】：2013-08-06 14:41:43 【问题描述】：我创建了一个 CSS 下拉菜单，并用边框完成了它。当我添加左边框和下边框时，一切都很好。一旦我添加了右边框，它就会在右边框和下拉菜单之间放置一个间隙。有没有什么办法解决这一问题？ 这是一张照片http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash3/563034_641717089180441_1749213926_n.jpg
我使用的 html：
<nav id="main_nav" class="fluid">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Show Services</a>
<ul>
<li><a href="#">Audio</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">Power</a></li>
<li><a href="#">Special Effects</a></li>
<li><a href="#">Staging/Trussing</a></li>
<li><a href="#">Video</a></li>
</ul>
</li>
<li><a href="#">Systems Integration</a>
<ul>
<li><a href="#">Corporate and Commercial</a></li>
<li><a href="#">Digital Signage</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">IP Based Systems</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Concrets</a></li>
<li><a href="#">Installations</a></li>
<li><a href="#">Parties</a></li>
<li><a href="#">Product Launch</a></li>
<li><a href="#">Trade Shows</a></li>
</ul>
</li>
<li><a href="#">Our Company</a></li>
</ul>
</nav>
我使用的 CSS：
#main_nav
#main_nav ul
list-style-type: none;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
margin-left: 0%;
padding-top: 0%;
padding-right: 0%;
padding-bottom: 0%;
padding-left: 0%;
width: 100%;
position: relative;
float: left;
#main_nav ul li
float: left;
position: relative;
width: 20%;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
margin-left: 0%;
padding-top: 0%;
padding-right: 0%;
padding-bottom: 0%;
padding-left: 0%;
background-color: #4d4d4d;
#main_nav ul li a
width: 100%;
float: left;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
padding-top: 0%;
font-style: normal;
font-weight: 400;
font-family: allerta;
font-size: 1em;
display: block;
padding-right: 0%;
padding-bottom: 0%;
padding-left: 0%;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
margin-left: 0%;
border-left: 0.1em solid #999999;
border-bottom: 0.1em solid #999999;
border-right: 0.1em solid #999999;
#main_nav a:hover, #main_nav a:active, #main_nav a:focus, #main_nav a.thispage
background-color: #666666;
color: #0099FF;
width: 100%;
#main_nav ul li ul
visibility: hidden;
margin-right: 0%;
margin-bottom: 0%;
margin-left: 0%;
padding-right: 0%;
padding-bottom: 0%;
padding-left: 0%;
float: left;
list-style-type: none;
position: absolute;
margin-top: 100%;
padding-top: 0%;
width: 100%;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
#main_nav ul li ul li
position: relative;
float: left;
width: 100%;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
margin-left: 0%;
padding-top: 0%;
padding-right: 0%;
padding-bottom: 0%;
padding-left: 0%;
background-color: #4d4d4d;
#main_nav ul li ul li a
width: 100%;
padding-right: 0%;
padding-bottom: 0%;
padding-left: 0%;
margin-top: 0%;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0%;
float: left;
font-style: normal;
font-weight: 400;
font-family: allerta;
font-size: 0.9em;
text-align: center;
text-decoration: none;
display: block;
color: #FFFFFF;
text-transform: uppercase;
#main_nav ul li:hover ul, #main_nav ul li:active ul, #main_nav ul li:focus ul, #main_nav ul li.thispage ul
visibility: visible;
width: 100%;
【问题讨论】：
你能添加一个带有多余空间的菜单截图吗？ 【参考方案1】：我查看了您的代码并进行了一些更改。还冒昧地为您创建了一个 JS Fiddle 示例。我没有更改任何 HTML，只更改了 CSS。
See JS Fiddle here
html
font: 100%/1.5 Arial, Helvetica, sans-serif;
html, body
margin: 0;
/* Common (Shared) Properties */
#main_nav, ul, li, a
display: block;
margin: 0;
padding: 0;
#main_nav ul
list-style: none;
width: 100%;
position: relative;
float: left;
#main_nav li
float: left;
position: relative;
width: 20%;
background: #4d4d4d;
#main_nav a
float: none;
text-align: center;
text-transform: uppercase;
color: #FFF;
text-decoration: none;
font-size: 1em;
border: 1px solid #999;
border-top: none;
#main_nav a:hover,
#main_nav a:active,
#main_nav a:focus,
#main_nav a.thispage
background: #666;
color: #FFF;
/* Controls Dropdown */
#main_nav ul li ul
visibility: hidden;
position: absolute;
top: auto; /* Updated position to 'auto' and removed margin-top: 100% */
left: 0;
#main_nav ul ul li
float: none;
width: 100%;
#main_nav ul li:hover ul,
#main_nav ul li:active ul,
#main_nav ul li:focus ul,
#main_nav ul li.thispage ul
visibility: visible;
display: block;
【讨论】：
真的应该说清楚你改变了什么以及为什么，而不仅仅是返回编辑后的代码 我可能应该说得更清楚一点，克里斯，但当时我非常忙。我推断有一些帮助总比没有好。【参考方案2】：我重写了 CSS，希望对学习有所帮助，因为它更易于理解并且可以解决您的问题。
问题是子菜单项的宽度为 100% + 每边 1px 边框超过 100%，因此溢出。
这里是带有修复的 JS Fiddle 示例的链接：http://jsfiddle.net/MartinTale/69gDQ/3/
这是新的 CSS：
#main_nav ul
list-style-type: none;
margin: 0;
padding: 0;
#main_nav ul
width: 100%;
#main_nav li
background-color: #4d4d4d;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
#main_nav > ul > li
float: left;
width: 20%;
#main_nav ul ul
display: none;
#main_nav ul li:hover ul
display: inline-block;
#main_nav a
text-align: center;
text-decoration: none;
color: #FFF;
text-transform: uppercase;
display: inline-block;
width: 100%;
border-left: 1px solid #999999;
border-bottom: 1px solid #999999;
border-right: 1px solid #999999;
#main_nav ul li ul a
border-left: 0;
border-right: 0;
#main_nav a:hover,
#main_nav a:active,
#main_nav a:focus,
#main_nav a.thispage
background: #666;
color: #09F;
【讨论】：
对不起，但这没有帮助。如果你再看一下菜单，导航菜单按钮右侧的边框和边框之间有一点空间。 现在也修复了这个问题，请参阅新的 CSS。然而，在出现更大的问题之前，现在一切都应该得到解决。祝项目顺利。 ;) sphotos-b.ak.fbcdn.net/hphotos-ak-ash3/… 这是我的问题的图片 非常感谢，还有一个问题。下拉菜单推送我的内容。 你应该为它提出一个新问题，因为它是你需要弄清楚的完全不同的问题。 ;)以上是关于我的 CSS 下拉菜单和右边框之间有一个空格。如何删除它？的主要内容，如果未能解决你的问题，请参考以下文章
搜索框左边有下拉菜单，求大牛告诉一下js/jQuery+div+css怎么完成这个
请问html怎么把文本框做成下拉框，或下拉框去掉右边的倒三角