Html 删除<；ul>；_Html_Css - Fatal编程技术网

Html 删除<；ul>；

html css

Html 删除<；ul>；,html,css,Html,Css,好的，我有一个小菜单栏，菜单中的三个元素有更多的子菜单。但是菜单栏中的元素之间有不必要的间距，我创建的子菜单也有不必要的背景宽度，我在代码中用白色表示，以使读者理解。由于这种不必要的宽度，即使鼠标悬停在不可见的宽度上，菜单栏上应该出现的悬停效果也会出现，在这种情况下，该宽度是白色的，但在实时代码中，它不会是白色的。因此，由于它在实时代码中不可见，访问者可能会困惑，为什么即使将鼠标从子菜单中移开，子菜单仍然没有隐藏。因此，我希望删除元素之间不必要的间距，使它们在菜单栏中对齐，并将子菜单的宽度减小到

好的，我有一个小菜单栏，菜单中的三个元素有更多的子菜单。但是菜单栏中的元素之间有不必要的间距，我创建的子菜单也有不必要的背景宽度，我在代码中用白色表示，以使读者理解。由于这种不必要的宽度，即使鼠标悬停在不可见的宽度上，菜单栏上应该出现的悬停效果也会出现，在这种情况下，该宽度是白色的，但在实时代码中，它不会是白色的。因此，由于它在实时代码中不可见，访问者可能会困惑，为什么即使将鼠标从子菜单中移开，子菜单仍然没有隐藏。因此，我希望删除元素之间不必要的间距，使它们在菜单栏中对齐，并将子菜单的宽度减小到子菜单内链接的宽度。我知道这可能有点难以解释，所以我张贴这个小提琴链接

我不能发布CSS代码，因为在一个问题中只允许发布30000个字符，所以您可以通过从JSFIDLE复制在本地机器上编译代码。对不起，我做了额外的努力。Html也我张贴只是因为它是一个必要的张贴一些代码

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>


专家系统

尝试将

style=“margin:0；”

添加到ul元素或将

ul{margin:0；}

添加到样式表中

是否使用工具生成此代码？如果是这样，它似乎不起作用

这里是正在发生的事情的摘要：

如果仔细观察并检查具有所有间距的图元。元素本身有很大的

边距：x
    ul.menu .Unlock a {
    margin-left: 185px;
    ....

    ul.menu .Expertise a {
    margin-left: 277px;
    ....

如果您手动浏览并删除所有这些边距，您的菜单将开始合并
但我会仔细看看你可能正在使用的工具，因为这确实是你的问题所在
确实没有，但您的代码实在是一团糟，请尝试清理一下；）哈哈。。你不会相信这是更干净的版本。在此之前的版本有太多不必要的代码行，以至于没有人准备阅读。。但我仍然在努力。我非常愿意帮助你，但是通过700多行CSS进行搜索有点让我感激并完全理解这一点。但是你可以使用这个小提琴，只需正确显示这个子菜单。试试这个，这是我目前所能做的最好的了，我很感谢你的投票：）如果你正在使用一个工具来生成你的代码，你应该把它包含在你的问题中。它可能会帮助你得到更好的答案。哦，那太傻了，它完全消除了空间。谢谢现在我唯一的问题是子菜单背景的宽度。。（白色）在我发布的JSFIDLE中。谢谢你的帮助。你是手工输入了所有这些代码，还是它是由什么东西生成的