html - 为什么我的导航栏没有占据整个容器？

Question

The nav-bar isn't a perfect rectangle, nor is it in line with the header image/body container. (This is an image)

我刚刚开始编码，所以很抱歉使用了不正确的术语。无论如何，这让我抓狂，我所做的就是让它正确排列......我将把完整的代码链接到一个 pastebin 中，并在此处发布菜单本身的 CSS 和 HTML。

  <nav class="nav">
  <ul><li>Home</li>
  <li>About
    <ul>
  <a href="about.html"><li>Open Skies</li></a>
      <a href="hippotherapy.html"><li>Our Therapy</li></a>
      <a href="horses.html"><li>Our Horses</li></a>
  </ul>
  </li>
  <li><a href="photos.html">Photos</a></li>
  <li>Support
        <ul>
      <li>Volunteer</li>
      <li>Donate</li>
        </ul>
   </li>
  <li>Contact</li>
    </ul>
</nav>

这是 CSS:

.nav a {
    text-decoration: none;
    color: white;
}

ul {
    width: 1004px;
  text-align: center;
  display: inline;
  margin: 0 auto;
  padding: 15px 4px 16px 0;
  list-style: none;
    background-color: #58C84F;
    background-image: url(images/navbar.png);
    color: #FFFFFF;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    text-transform: uppercase;
    font-size: 25px;
    text-decoration: none;
    text-shadow: 0px 0 3px hsla(0,100%,1%,0.48);  
    z-index: 10;
}

ul li {
    width: 159px;
    display: inline-block;
    margin-right: -3px;
    margin-left: 1px;
    position: relative;
    padding-top: 15px;
    padding-right: 19px;
    padding-left: 19px;
    padding-bottom: 15px;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

ul li:hover {
  background: hsla(129,31%,25%,0.59);
}

ul li ul {
  padding: 0;
  background-image: none;
  position: absolute;
  background: hsla(113,33%,19%,1.00);
  top: 60px;
  left: 0;
  width: 199px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

ul li ul li { 
text-align: left;
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
  font-size: 18px;
}

ul li ul li:hover {
    background: hsla(117,41%,25%,1.00) ;
    }

ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

This is the full code.

PS:我使用的是 Dreamweaver CC。

Answer 1

部分问题是 display: inline-block 的结果，其余部分是边距/框大小问题。

使用内联 block

display: inline-block; 使用与文本相同的规则将元素添加到屏幕。这也意味着 HTML 中这些元素之间的任何空格也会被使用。有a lot of ways解决这个问题，但我将 display: inline-block; 属性更改为 float: left;(不要忘记 clearfix!)

接下来，您需要移除所有地方的负边距。添加这些内容主要是为了解决上述问题，并且只会在您继续进行更改时扰乱布局的其余部分。

盒子大小(可选)

最后，box-sizing: border-box 允许您在不影响框的外部宽度的情况下调整填充和边框。也就是说，width 不再改变内容框的宽度。相反，它将元素的宽度更改为(包括)边框。这是一个可选步骤，但我发现它使事情更容易计算，因为您不需要添加/减去填充或边框宽度来实现完美匹配。

body {
    background: #EFF5F9;
}
.heading {
    text-align: center;
    text-transform: uppercase;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size: 20px;
    width:100%;
    background-color: #71C969;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #FFFFFF;
    text-shadow: 0px 0 3px hsla(0,100%,1%,0.48);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: url(images/titles.png);
}

#header {
    background-color: #EBEBEB;
    width: 100%;
    position: relative;
    margin: 0px auto;
    height: 250px;
}

.content {
    width: 1000px;
    margin: 0px auto;
    padding: 0px;
    margin-top: -8px;
    margin-bottom: 20px;
}

.nav a {
    text-decoration: none;
    color: white;
}

ul {
    width: 1000px;
    text-align: center;
    display: block;
    margin: 0px auto;
    padding: 0px;
    list-style: none;
    background-color: #58C84F;
    background-image: url(images/navbar.png);
    color: #FFFFFF;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    text-transform: uppercase;
    font-size: 25px;
    text-decoration: none;
    text-shadow: 0px 0 3px hsla(0,100%,1%,0.48);  
    z-index: 10;
}

/* Clearfix */
ul::after { content: ""; display: block; clear: both; }

ul li {
    box-sizing: border-box;
    width: 200px; /* There are 5 nav elements, so this is 1/5 of parent width (1000px) */
    float: left;
    position: relative;
    padding-top: 15px;
    padding-right: 19px;
    padding-left: 19px;
    padding-bottom: 15px;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

ul li:hover {
    background: hsla(129,31%,25%,0.59);
}

ul li ul {
    padding: 0;
    background-image: none;
    position: absolute;
    background: hsla(113,33%,19%,1.00);
    top: 60px;
    left: 0;
    width: 199px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}

ul li ul li {
    text-align: left;
    display: block;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
    font-size: 18px;
}

ul li ul li:hover {
    background: hsla(117,41%,25%,1.00) ;
}

ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

#container {
    background: #D6F1D4;
    min-height: 1000px;
}

#sidebar-left {
    background: #BAE4B7;
    float: left;
    width: 23%;
    min-height: 1000px;
    text-align: center;
}

#sidebar-right {
    background: #BAE4B7;
    float: right;
    width: 23%;
    min-height: 1000px;
    margin: 0 auto;
    text-align: center;
}

#sidebar-right img{
    margin-top: 5px;
}

#main {
    background: #D6F1D4;
    min-height: 750px;
    display: inline-block;
    width: 50%;
    margin: 0 auto;
    padding: 10px;
    color: #061B05;
    font-family: Verdana;
    font-size: 13px;
}

.text {
    font-family: Verdana;
    font-size: 13px;
    padding: 5px;
    color: #061B05;
}

.q {
    text-align: center;
    font-weight: bold;
    color: #23761C;
    text-transform: uppercase;
    font-size: 22px;
    font-family: Cambria;
}

#social media img{
    margin-left: 10px;
    margin-right: 10px;
}

.faderandom {
    position:relative;
    width:500px;
    height:332px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.faderandom img {
    position:absolute;
    left:0;
    top:0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    user-drag: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
}

<div class="content">
    <header id="header"><a href="index.html"><img src="images/Header.png" width="1000" height="250" alt="Open Skies Therapeutic Riding" draggable="false"/></a></header>
    <nav class="nav">
        <ul><li>Home</li>
            <li>About
                <ul>
                    <a href="about.html"><li>Open Skies</li></a>
                    <a href="hippotherapy.html"><li>Our Therapy</li></a>
                    <a href="horses.html"><li>Our Horses</li></a>
                </ul>
            </li>
            <li><a href="photos.html">Photos</a></li>
            <li>Support
                <ul>
                    <li>Volunteer</li>
                    <li>Donate</li>
                </ul>
            </li>
            <li>Contact</li>
        </ul>
    </nav>
    <div id="container">
        <aside id="sidebar-left"><div class="heading">Follow us</div><br>
            <div id="social media"><a href="malito: openskiesjeddah@gmail.com"><img src="images/email118.png" width="32" height="32" alt=""/></a>
                <a href="https://www.facebook.com/Open-skies-jeddah-therapeutic-riding-days-321515728200/">
                    <img src="images/facebook29.png" alt="facebook" width="32" height="32" title="facebook"/>
                </a>
            </div>
            <br>
                <div class="heading">Fun Facts</div><br>
                <div class="text">
                    <p>In Islam, teaching children to ride a horse is prescribed, as well as learning to swim and shooting a bow and arrow.</p>
                    In one hour on a horse, the body may get more exercise than it would in one month on a wheelchair.</div><br>

                </aside>
                <div id="main">
                    <script>
                        $(function(){
                        $('.faderandom > :gt(0)').hide();
                        setInterval(function(){
                        var rand = Math.floor(Math.random() * ($('.faderandom').children().length-1));
                        $('.faderandom > :first-child').appendTo('.faderandom').fadeOut();
                        $('.faderandom > *').eq(rand).prependTo('.faderandom').fadeIn();
                        }, 3000);
                        });
                    </script>
                    <div class="faderandom">
                        <img src="images/index slideshow/index-_0001_judy-on-spotty-horse.jpg.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0002_kid-on-spotty-horse.jpg.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0003_kid-with-ball.jpg.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0004_DSC04409.JPG.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0005_DSC04411.JPG.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0006_DSC04391.JPG.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0007_DSC04392.JPG.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0008_DSC00632.JPG.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0009_DSC00637.JPG.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0010_DSC00641.JPG.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0011_DSC05208.JPG.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0012_DSC06302.JPG.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0013_DSC06324.JPG.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0014_Vibrance-2.png" width="500" height="332" alt=""/><img src="images/index slideshow/index-_0015_Vibrance-1.png" width="500" height="332" alt=""/> </div>
                    <br><div class="q">What is Open Skies?</div>
                        <p>We are a non-profit organization that mostly depends on word of mouth to find both riders and volunteers. We are the only facility in the kingdom of Saudi Arabia that provides hippotherapy, which is the practice of using horseback riding as a therapeutic or rehabilitative treatment, especially as a means of improving coordination, balance and strength. </p>
                        <p>Open Skies was founded in 1998 by Mrs. Judy Houry, who is a  registered qualified therapeutic instructor of north American riding for the  handicapped association, a member of the federation of riding for the disabled  international, and of the equine facilitated mental health association.</p>

                        </div>
                    <aside id="sidebar-right">
                        <div class="heading">meet our horses</div>
                        <img src="images/headshots/badr.png" width="180" height="150" alt=""/><br><img src="images/headshots/hilal.png" width="180" height="150" alt=""/><br><img src="images/headshots/im not sure what her name is.png" width="180" height="150" alt=""/><br><img src="images/headshots/malak.png" width="180" height="150" alt=""/><br><img src="images/headshots/nejma.png" width="180" height="150" alt=""/><br><img src="images/headshots/sebastian.png" width="180" height="150" alt=""/> </aside>

                        </div>
                        </div>