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

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。 / p>

  <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

尝试将z-index:99999和宽度和高度设置为100％并position:relative;display:block

Answer 2

您的部分问题是display: inline-block的结果，其余部分是保证金/大小调整问题。

使用内联块

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

接下来，您需要删除到处都有的负边距。这些主要是为了解决上面的问题而添加的，只是在你继续进行更改时会弄乱其余的布局。

大小调整（可选）

最后，box-sizing: border-box允许您调整填充和边框，而不会影响框的外部宽度。也就是说，width不再更改内容框宽度。相反，它会将元素的宽度更改为（并包括）边框。这是一个可选步骤，但我发现它使事情更容易计算，因为您不需要添加/减去填充或边框宽度以使其完美契合。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;