Question

我目前正在开设一个实践示例网站，作为我的计算机科学GCSE课程的一部分。我在导航CSS方面遇到了麻烦。该网站正在进行中，所以我知道这不是很好，但这是我的代码：

<!DOCTYPE html>
<html>

    <head>

        <title>The Cotswold Jeweller</title>
        <link rel="stylesheet" href="../Assets/css/normalize.css" media="screen" type="text/css">
        <link rel="stylesheet" href="../Assets/css/main.css" media="screen" type="text/css">
        <link rel="stylesheet" href="../Assets/css/grid.css" media="screen" type="text/css">

    </head>

    <body>

        <div class="head">

            <h1>The Cotswold Jeweller</h1>

        </div>

        <div class="nav_contain">

            <ul class="nav">

                <li><h2><a href="index.html">Home</a></h2></li>
                <li><h2><a href="#">Services</a></h2></li>
                <li><h2><a href="#">Location</a></h2></li>

            </ul>

        </div>

        <div class="wrapper">

            <p>Welcome to the home of The Cotswold Jeweller on the web. Here at The Cotswold Jeweller we offer a unique and reliable service to create a friendly and local experience for our customers. We are very proud to also stock products from many different popular and large groups, such as Citizen, Butler and Peach and many more while we still maintain our local, reliable ethos.</p>

            <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=The+Cotswold+Jeweller,+Granville+Court,+Shipston-on-Stour&amp;aq=0&amp;oq=The+Cotswold+Jewe&amp;sll=52.8382,-2.327815&amp;sspn=8.08612,21.643066&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;ll=52.062826,-1.623898&amp;spn=0.006295,0.006295&amp;t=m&amp;iwloc=A&amp;output=embed"></iframe>

        </div>

        <div class="footer">

            <p>Copyright 2014 &copy; The Cotswold Jeweller</p>

        </div>

    </body>

</html>

这是CSS：

body {

    background-color: #FFFFFF;

}

.wrapper {

    width: 1100px;
    margin: auto;

}

.head {

    text-align: center;
    font-family: "Times New Roman";
    font-size: 32px;

}

.nav li h2 a {

    text-decoration: none;
    color: #000000;
    font-family: "Times New Roman";
    width: 366px;
    float: left;

}

.nav {

    list-style: none;
    width: 1100px;
    margin: auto;
    text-align: center;

}

.nav_contain {

    border-top: 5px #990000 solid;
    border-bottom: 5px #990000 solid;

}

我希望导航栏位于导航容器的两个边框之间，但它们未正确对齐。请您在下面提供解决方案。谢谢。

Answer 1

您可以将overflow: auto添加到.nav容器中。这将防止其高度崩溃，因为它只包含浮动元素。

.nav {

    list-style: none;
    width: 1100px;
    margin: auto;
    text-align: center;
    overflow: auto;
}

或者，将此添加到.nav_contain也会产生类似的效果。

Answer 2

添加此

.nav li{
    display:inline-block;
}

并删除h2标签。

您可能还需要缩小“a”标签的大小，以使它们在屏幕上保持一致。我现在正在使用1280像素的显示器，我不得不将它们的宽度减小到300px。

另一种方法是完全删除li标签。链接仍然应该并排显示，因为你的边界在“.nav”之外，那么它们应该包含它。

如果不起作用，请告诉我。

Answer 3

通常会尝试避免像

这样的固定值

 width: 1100px; //(1)

你可以替换它，例如

width: 90%;  //(2)

(1)正以其他分辨率破坏您的网站。使用(2)来避免它。

试试这段代码： http://paste.debian.net/69881/

如何在HTML中对齐元素？

3 个答案: