Question

在我的主页上，下拉列表ul看起来完全符合我的要求：

但是在我的所有其他页面上，ul看起来像这样大：

以下是主页的HTML：

<header id="header" class="alt">
            <h1><strong><a href="index.html">South Somerset Motocross Club</a></strong></h1>
            <nav id="nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a>Info</a>
          <ul class="alt">
                            <li><a href="pages/info/clubrules.html">Club Rules</a></li>
                            <li><a href="pages/info/preracecheck.html">Pre-Race Bike Check</a></li>
                            <li><a href="pages/info/jobdescriptions.html">Job Descriptions</a></li>
                            <li><a href="pages/info/racefees.html">Race Fees</a></li>
                            <li><a href="pages/info/groupsandages.html">Groups And Ages</a></li>
          </ul>
        </li>
                    <li><a>About Us</a>
                        <ul class="alt">
                            <li><a href="pages/aboutus/ourheritage.html">Our Heritage</a></li>
                            <li><a href="pages/aboutus/committee.html">Committee</a></li>
                        </ul>
                    </li>
                    <li><a href="pages/news/news.html">News</a></li>
                    <li><a href="pages/fixtures.html">Fixtures</a></li>
                </ul>
            </nav>
        </header>

以下是其他页面的HTML：

<header id="header">
            <h1><strong><a href="../../index.html">South Somerset Motocross Club</a></strong></h1>
            <nav id="nav">
                <ul>
        <li><a href="../../index.html">Home</a></li>
                    <li><a>Info</a>
          <ul class="alt">
                            <li><a href="clubrules.html">Club Rules</a></li>
                            <li><a href="preracecheck.html">Pre-Race Bike Check</a></li>
                            <li><a href="jobdescriptions.html">Job Descriptions</a></li>
                            <li><a href="racefees.html">Race Fees</a></li>
                            <li><a href="groupsandages.html">Groups And Ages</a></li>
          </ul>
        </li>
                    <li><a>About Us</a>
                        <ul class="alt">
                            <li><a href="../aboutus/ourheritage.html">Our Heritage</a></li>
                            <li><a href="../aboutus/committee.html">Committee</a></li>
                        </ul>
                    </li>
                    <li><a>News</a></li>
                    <li><a href="../fixtures.html">Fixtures</a></li>
                </ul>
            </nav>
        </header>

以下是两者的CSS：

#header {
    background-color: #fff;
    border-bottom: solid 1px rgba(144, 144, 144, 0.25);
    box-shadow: 0px 0.0375em 0.125em 0px rgba(0, 0, 0, 0.05);
    color: #000;
    cursor: default;
    font-size: 1.25em;
    height: 4.5em;
    left: 0;
    line-height: 4.4em;
    position: fixed;
    text-transform: uppercase;
    top: 0;
    width: 100%;
    z-index: 10000;
    z-index: 10001;
}

#header a {
    color: #000;
}

    #header h1 {
        color: #000;
        font-weight: 400;
        height: inherit;
        left: 1.25em;
        line-height: inherit;
        margin: 0;
        padding-left: 10px;
        padding-right: 10px;
        position: absolute;
        top: 0;
    }


    #header nav {
        height: inherit;
        line-height: inherit;
        position: absolute;
        right: 1.25em;
        top: 0;
        vertical-align: middle;
    }

        #header nav ul {
            list-style: none;
            margin: 0;
            padding-left: 0;
        }

            #header nav ul li {
                color: #fff;
                display: inline-block;
                padding-top: 0;
                padding-bottom: 0;
                padding-left: 10px;
                padding-right: 10px;
                margin-left: 1em;
            }


            #header nav ul li ul {
                display: none;
                padding: 0;
                margin: 0;
                background-color: #eee;
                border-radius: 4px;
            }

            #header nav ul li:hover ul {
                display: block;
                position: absolute;
            }

            #header nav ul li ul li {
                border-radius: 4px;
                margin: 0 0 0 0;
                padding-left: 4px;
                padding-top: 0;
                padding-right: 50px;
                display: block;
                color: black;
                font-size: 12pt;
            }

        #header nav ul li ul li a {
            color: #111;
            padding: 0;
            margin: 0;
            display: block;
        }

        #header nav ul li ul li a:hover {
            color: rgba(255, 255, 0, 1);
        }

        #header.alt nav ul li ul li a:hover {
            color: rgba(255, 255, 0, 1);
        }

        #header.alt nav ul li ul li:hover {
            background-color: #3477ff;
        }

        #header nav ul li ul li:hover {
            background-color: #3477ff;
        }

        #header.alt nav ul li ul li a {
            color: #000;
            padding: 0;
            display: block;
        }


                #header nav ul li a {
                    -moz-transition: color 0.1s ease-in-out;
                    -webkit-transition: color 0.1s ease-in-out;
                    -ms-transition: color 0.1s ease-in-out;
                    transition: color 0.1s ease-in-out;
                    color: #000;
                    display: inline-block;
                    text-decoration: none;
                }

                    #header nav ul li a:hover {
                        color: #000;
                    }


                #header nav ul li .button {
                    border-color: rgba(144, 144, 144, 0.25);
                    box-shadow: none;
                    height: 3em;
                    line-height: 2.9em;
                    margin-bottom: 0;
                    padding: 0 1.5em;
                    position: relative;
                    top: -0.075em;
                    vertical-align: middle;
                }

    #header .container {
        position: relative;
    }

        #header .container h1 {
            left: 0;
        }

        #header .container nav {
            right: 0;
        }

    #header.alt {
        background-color: transparent;
        border: 0;
        box-shadow: none;
        height: 3.25em;
        line-height: 3.25em;
        position: absolute;
    }

        #header.alt h1 {
            color: #ffffff;
            left: 2.5em;
            top: 2em;
        }

            #header.alt h1 a {
                color: #FFF;
            }

        #header.alt nav {
            right: 2em;
            top: 2em;
        }

            #header.alt nav a {
                color: #ddd;
            }

                #header.alt nav a:active, #header.alt nav a:hover {
                    color: #FFF;
                }

        #header.alt .button {
            border-color: rgba(255, 255, 255, 0.5);
            color: #ffffff !important;
        }

    @media screen and (max-width: 980px) {

        #header {
            display: none;
        }

    }

我希望其他页面的<ul>元素与主页的大小相同，但我似乎无法在其上找到任何额外的边距或填充。

Answer 1

这是因为alt class。 ul li ul li获取alt class的行高。

因此，通过添加相同的行高，强制line-height #header nav ul li ul li。这是line-height: 3.25em;。

Answer 2

问题在于您的行高 - 它们在#header和#header.alt上设置为不同的值：

#header.alt:
line-height: 3.25em;

#header:
line-height:4.4em;

这导致您在导航链接中看到的差异。

我的`<li>`尺寸在不同页面

2 个答案: