为什么我的导航类没有扩展到宽度的100％？

时间：2017-03-26 04:13:07

标签： html css css3 dom position

所以我试图理解为什么当我指定.thenav类的宽度时，它不会扩展到页面的整个宽度。

我理解它正在考虑.container类的特征，但我不明白为什么以及在指定宽度的情况下解决方案是什么？请帮助！

这是我正在发生的事情的图片（我附上了一张正在发生的事情的图片，因为jsfiddle让div出现在100％而且不是）：

http://imgur.com/a/zsBqC

这是我的jsfiddle：

https://jsfiddle.net/CheckLife/yox7Ln1b/3/

以下是供参考的代码：

HTML：

<div class="header">
  <div class="container">
    <h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
    <div class="thenav" onload="changed()">
      <ul>
        <li><a href="http://www.nba.com"/>Home</a></li>
        <li onclick="changeP()"><a href="#">About</a></li>
        <li><a href="#">Players</a>
            <ul>
                <li onmouseover="slow()"><a href="#"/>T-Mac <img src="tmacw.png" width="25px" height="20px" class="tmacw"></a></li>
                <li><a href="#kobesec"/>Kobe</a></li>
                <li><a href="#"/>Kevin Durant</a></li>
                <li><a href="#"/>The Goat</a></li>
            </ul>
        </li>
        <li onclick="slow()"><a href="#">News</a></li>
      </ul>         
    </div>
  </div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
}

header, nav, section, aside, footer, article {
    display: block;
}

body {
background-image: url(backwood.png);
width: 100%;
margin: auto;

}

.container {
    margin: 0px auto;
    background-size: cover;
    width: 1300px;
    height: 100%;
}

.header {
    background:linear-gradient(to right, #5092f4, #f29641);
    margin-top: 0px;
    width: 100%;
}

.header h1{
    text-align: center;
    width: 100%;
    padding-bottom: 15px;
    font-family: Arial, Helvetica, sans-serif;
    color: #f4ca1f;
}
.tmacw {
    display:inline;
    position: relative;
    padding: 0px;
    top: 5px;
}

.nba {
    margin-right: 10px;
}

.thenav {
    background-color: #7886a3;
    width: 100%;
    height: 85px;
    position: relative;
    z-index: 1;
}

                /* Style for the Nav Bar */


.thenav ul {
    padding: 0;
    margin: 0;

}

.thenav ul li {
    float: left;
    width: 90px;

    text-align: center;
    border-right: 1px groove #141e38;
    position: relative;
}

.thenav ul li a {
    display: block;
    color: white;
    font-weight: bold;
    padding: 33px 10px;
}

.thenav ul li a:hover {
    background-color: #47e586;
    transition: all 0.90s;
}

                                /*Dropdown Nav */

.thenav li ul li{
    background-color: #7886a3;
    border: 2px groove grey;
    border-radius: 4px;
    position: relative;
}

.thenav li ul li a {
padding: 8px;
text-align:left;
}

.thenav li ul li:nth-child(1)  a:hover {
    background-color: #F47575;

}

.thenav li ul li:nth-child(2)  a:hover {
    background-color: #f7d759 ;
}
.thenav li ul li a:hover{
    background-color: red;
}




.thenav ul li ul {
    display: none;
}
.thenav li:hover ul{
    position:absolute;

}
.thenav li:hover ul{
    display: block;
}

                    /* End of Dropdown */

.userlogin {
    font-size: 12px;
    top:2px;
    color: white;
}

input[type=text], input[type=password] {
    font-weight: bold;
    margin: 0;
    font-size: 8px;
    height: 10px;
    padding: 3px 5px 3px 5px;
    color: 162354;
    }

                        /* Stats Button */
.stat input[type=button] {
    background-color: #6cd171;
    color: blue;
    border-radius: 6px;
    font-weight: bold;
    border: none;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    padding: 2px 2px;
    font-family: Verdana, Geneva, sans-serif;
}


.log[type=button] {
    background-color: white;
    color: #008cff;
    border-radius: 4px;
    font-weight: bold;
    border: none;
    padding: 1px 2px 2px 2px;
    position: relative;
    left: 5px;
    top: 3px;

}

3 个答案:

答案 0 :(得分：0)

没有绝对定位并且宽度为100％的子div（如果它的显示是block的默认值，则不需要）将被设置为它的容器宽度。您的div.container设置为width设置为1300像素，它是div.thenav的父元素，因此div.thenav的宽度也将是1300像素。

您可以删除容器上的宽度：

.container {
    margin: 0px auto;
    background-size: cover;
    /*width: 1300px;  remove this */
    height: 100%;
}

或：

将div.thenav移到div.container之外，如下所示： （https://jsfiddle.net/nod19rze/）

<div class="header">
  <h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
  <div class="thenav" onload="changed()">
    <!-- contents of thenav here -->
  </div>
    <div class="container">

  </div>
</div>

答案 1 :(得分：0)

容器应该是第一个包装器，然后是标头，这可以解决问题。我不确定这是否是你需要的。请检查这个小提琴： https://jsfiddle.net/estgLn1q/1/ 

<div class="container">
    <div class="header">
    </div>
</div>

或者如果您想保持相同的html结构，请从＆＃39; .container＆＃39;中删除width:1300px。这将导致容器采用与其父容器相同的宽度。

答案 2 :(得分：0)

我只会将#box和.thenav移出.container，然后在这些元素之后启动该类。

＆＃13;
＆＃13; 
  * {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
}

header,
nav,
section,
aside,
footer,
article {
  display: block;
}

body {
  background-image: url(backwood.png);
  width: 100%;
  margin: auto;
}

.container {
  margin: 0px auto;
  background-size: cover;
  width: 1300px;
  height: 100%;
}

.header {
  background: linear-gradient(to right, #5092f4, #f29641);
  margin-top: 0px;
  width: 100%;
}

.header h1 {
  text-align: center;
  width: 100%;
  padding-bottom: 15px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f4ca1f;
}

.tmacw {
  display: inline;
  position: relative;
  padding: 0px;
  top: 5px;
}

.nba {
  margin-right: 10px;
}

.thenav {
  background-color: #7886a3;
  width: 100%;
  height: 85px;
  position: relative;
  z-index: 1;
}


/* Style for the Nav Bar */

.thenav ul {
  padding: 0;
  margin: 0;
}

.thenav ul li {
  float: left;
  width: 90px;
  text-align: center;
  border-right: 1px groove #141e38;
  position: relative;
}

.thenav ul li a {
  display: block;
  color: white;
  font-weight: bold;
  padding: 33px 10px;
}

.thenav ul li a:hover {
  background-color: #47e586;
  transition: all 0.90s;
}


/*Dropdown Nav */

.thenav li ul li {
  background-color: #7886a3;
  border: 2px groove grey;
  border-radius: 4px;
  position: relative;
}

.thenav li ul li a {
  padding: 8px;
  text-align: left;
}

.thenav li ul li:nth-child(1) a:hover {
  background-color: #F47575;
}

.thenav li ul li:nth-child(2) a:hover {
  background-color: #f7d759;
}

.thenav li ul li a:hover {
  background-color: red;
}

.thenav ul li ul {
  display: none;
}

.thenav li:hover ul {
  position: absolute;
}

.thenav li:hover ul {
  display: block;
}


/* End of Dropdown */

.userlogin {
  font-size: 12px;
  top: 2px;
  color: white;
}

input[type=text],
input[type=password] {
  font-weight: bold;
  margin: 0;
  font-size: 8px;
  height: 10px;
  padding: 3px 5px 3px 5px;
  color: 162354;
}


/* Stats Button */

.stat input[type=button] {
  background-color: #6cd171;
  color: blue;
  border-radius: 6px;
  font-weight: bold;
  border: none;
  float: left;
  margin-top: 20px;
  margin-left: 20px;
  padding: 2px 2px;
  font-family: Verdana, Geneva, sans-serif;
}

.log[type=button] {
  background-color: white;
  color: #008cff;
  border-radius: 4px;
  font-weight: bold;
  border: none;
  padding: 1px 2px 2px 2px;
  position: relative;
  left: 5px;
  top: 3px;
＆＃13; 
<div class="header">

  <h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
  <div class="thenav" onload="changed()">

    <ul>
      <li><a href="http://www.nba.com" />Home</a>
      </li>
      <li onclick="changeP()"><a href="#">About</a></li>
      <li><a href="#">Players</a>
        <ul>
          <li onmouseover="slow()"><a href="#" />T-Mac <img src="tmacw.png" width="25px" height="20px" class="tmacw"></a>
          </li>
          <li><a href="#kobesec" />Kobe</a>
          </li>
          <li><a href="#" />Kevin Durant</a>
          </li>
          <li><a href="#" />The Goat</a>
          </li>
        </ul>
      </li>
      <li onclick="slow()"><a href="#">News</a></li>
    </ul>

  </div>
  <div class="container">
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题