如何在 HTML 中对齐我的元素？答案

【问题标题】：How can I align my elements in HTML?如何在 HTML 中对齐我的元素？
【发布时间】：2013-12-08 21:43:07
【问题描述】：

我目前正在开发一个实践示例网站，作为我的计算机科学 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;

}

我想在导航容器的两个边框之间放置导航栏，但它们没有正确对齐。请您在下面提供解决方案。谢谢。

【问题讨论】：

标签： html css web alignment containers

【解决方案1】：

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

.nav {

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

或者，将其添加到 .nav_contain 具有类似的效果。

【讨论】：

【解决方案2】：

添加这个

.nav li{
    display:inline-block;
}

并删除 h2 标签。

您可能还必须减小“a”标签的大小，以使它们在屏幕上排成一行。我现在在一个 1280 像素的显示器上，我不得不将它们的宽度减小到 300 像素。

另一种选择是完全删除 li 标签。链接仍应并排显示，并且因为您的边框在“.nav”之外，所以它们应该包含它。

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

【讨论】：

【解决方案3】：

一般尽量避免像

这样的固定值

 width: 1100px; //(1)

您可以将其替换为例如

width: 90%;  //(2)

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

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

【讨论】：