删除< ul>中的元素之间不必要的间距。 [英] Remove the unnecessary spacing between elements inside an <ul>
问题描述
好吧，所以我有一个小菜单栏和菜单中的三个元素有进一步的子菜单。但是菜单栏内的元素之间有不必要的间距，我创建的子菜单有一个不必要的背景宽度，我在代码中用白色来使读者理解。由于这种不必要的宽度，即使鼠标悬停在不可见的宽度（在这种情况下是白色的，但在实时代码上它不会是白色的）上，应该出现在菜单栏上的悬停效果。所以，因为它不会在活代码中可见，访问者可能会感到困惑，为什么子菜单仍然没有被隐藏，即使他们已经删除他们的鼠标离开子菜单。所以我想删除元素之间不必要的间距，并使它们在菜单栏中的对齐，还将子菜单的宽度减少到子菜单中的链接宽度。我知道这可能有点难以解释，所以我发布这个小提琴链接。 DEMO
Ok, so I have a small menu bar and three of of the elements inside the menu have further submenus. But the elements inside the menu bar have unnecessary spacing between them and also the submenus that I have created have an unnecessary background width which I have colored white in the code to make the reader understand. Because of this unnecessary width the hover effect that is supposed to appear on menu bar appears even if mouse is hovered on the invisible width which is white in this case but on live code it wont be white. So since it wont be visible in live code visitors might be confused as to why the submenu is still not getting hidden even when they have removed their mouse away from the submenu. So I want to remove the unnecessary spacing between the elements and make their alignment right in the menu bar and also reduce the width of the submenu to width of links inside the submenu. I know this might be a bit difficult to explain so I am posting this fiddle link. DEMO
我无法发布CSS代码，因为只允许在一个问题中张贴30000个字符，因此您可以通过从jsfiddle复制在本地机器上编译代码。对不起，额外的努力。 Html也只是因为它是一个必要的post post一些代码。
I cannot post the CSS code because only 30000 characters are allowed to be posted in a question so you can compile the code on your local machine by copying from jsfiddle. Sorry for that extra effort. Html also I am posting only because it is a necessity to post some code.
HTML代码
<html>
<head>
<link rel="stylesheet" type="text/css" href="expertystemsHome2.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Expertystems</title>
</head>
<body>
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="Home"><a href="">AAAAAA</a></li>
<li class="Repair"><a href="">BBBBBB</a>
<ul class="submenu">
<li>
<a href="">b1</a>
</li>
<li>
<a href="">b2</a>
</li>
<li>
<a href="">b3</a>
</li>
<li>
<a href="">b4</a>
</li>
<li>
<a href="">b5</a>
</li>
<li>
<a href="">b6</a>
</li>
<li>
<a href="">b7</a>
</li>
<li>
<a href="">b8</a>
</li>
</ul>
</li>
<li class="Unlock"><a id="tempUnlock" href="">CCCCCC</a>
<ul id="mozillaPain2" class="submenu2">
<li>
<a href="">c1</a>
</li>
<li>
<a href="">c2</a>
</li>
<li>
<a href="">c3</a>
</li>
<li>
<a href="">c4</a>
</li>
</ul>
</li>
<li class="Expertise"><a id="Expertise" href="">DDDDDD</a>
<ul id="mozillaPain3" class="submenu4">
<li>
<a href="">d1</a>
</li>
<li>
<a href="">d2</a>
</li>
<li>
<a href="">d3</a>
</li>
<li>
<a href="">d4</a>
</li>
<li>
<a href="">d5</a>
</li>
<li>
<a href="">d6</a>
</li>
<li>
<a href="">d7</a>
</li>
<li>
<a href="">d8</a>
</li>
<li>
<a href="">d9</a>
</li>
<li>
<a href="">d10</a>
</li>
<li>
<a href=""><img style="width: 158px;height: auto;" src="images/creation.png"></a>
</li>
</ul>
</li>
<li class="Careers"><a href="">EEEEEE</a></li>
<li class="Contact"><a href="">FFFFFF</a></li>
</ul>
</div>
</body>
</html>
推荐答案
您是否使用工具来生成此代码？
Are you using a tool to generate this code? If so it doesn't appear to be working.
以下是发生的情况的摘要：
如果你仔细看看，检查有所有间距的元素。元素本身有这些真正大的 margin-left：x;
If you take a closer look and inspect the elements that have all of the spacing. The elements themselves have these really large margin-left:x;
ul.menu .Unlock a {
margin-left: 185px;
....
ul.menu .Expertise a {
margin-left: 277px;
....
如果您手动通过并删除所有这些边距将开始走到一起。
If you manually go through and remove all of these margins your menu will start coming together.
但我会仔细看看你可能使用的工具，因为这真的是你的问题。
But I would take a closer look at the tool you may be using because that is really were your problem is.
这篇关于删除< ul>中的元素之间不必要的间距。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
