Google的导航栏不适合宽度

时间：2015-10-28 19:45:50

标签： html css

我正在尝试重新创建 www.google.com 页面以学习css，但即使我尝试使用{{1，也无法让导航栏延伸到整个页面}}。 ul元素和body元素上的width:100%（它对body元素没有影响，所以我从那里删除了它）

我也尝试过使用

margin:0

在我的position:absolute; left:0; right:0; 内容中，但也无效。

您可以在下图中看到，导航栏不会跨越整个页面宽度。如果无法正确查看图像，可以通过下面显示的链接查看图像。

我确信它与我定位元素的方式有关，因为当我将鼠标悬停在我的个人资料图片或设置图标上时，它不适合整个区块的宽度并离开栏。

您可以使用以下链接在线查看该页面。

  

My Google Page

The navigation bar 

#header
body {
  margin: 0px;
}
.google-search {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
#logo {
  width: 272px;
  height: 92px;
  margin-top: 200px;
  margin-bottom: 20px;
}
.search {
  width: 535px;
  height: 40px;
  font-size: 16px;
  padding-left: 4px;
  margin: auto;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC) no-repeat right 4px center;
  background-size: auto 22px;
  margin-left: -100px;
  /*Styles */
  border-top: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
}
button {
  margin-top: 30px;
  margin-right: 4px;
  padding-right: 16px;
  padding-left: 16px;
  height: 40px;
  text-align: center;
  /*Styles */
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 2px;
  color: #757575;
  font-size: 13px;
  font-weight: bold;
  font-family: arial, sans-serif;
}
button:hover {
  color: #222;
  background-color: #f8f8f8;
  border: 1px solid #c6c6c6;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#lucky-button {
  margin-left: 4px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
a:hover {
  color: #222;
  background-color: #666666;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
a:link,
a:visited {
  color: #ccc;
  display: block;
  padding-top: 4px;
  padding-left: 8px;
  padding-bottom: 4px;
  text-decoration: none;
  text-align: center;
}
#header {
  background-color: #2d2d2d;
  width: 100%;
  height: 30px;
}
#navbar {
  margin-top: -10px;
  margin-left: -10px;
}
#me {
  float: right;
  margin-top: -24px;
  margin-bottom: 5px;
}
#footer {
  bottom: -150px;
  background-color: #f2f2f2;
  height: 30px;
  clear: both;
  position: relative;
}
#terms {
  float: right;
  margin-top: -24px;
  margin-bottom: 5px;
}
/*font color for the footer links */

.link:link,
.link:visited {
  color: #777;
}
.link:hover {
  color: #777;
  text-decoration: underline;
  padding-top: 4px;
  padding-left: 8px;
  padding-bottom: 4px;
  background-color: #f2f2f2;
  box-shadow: none;
}

下面的CSS仅显示与页眉和页脚相关的代码。

CSS：

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="styles/main.css">
  <title>Google</title>

</head>

<body>
  <div id="header">
    <div id="navbar">
      <ul>
        <li><a href="#">Google+</a>
        </li>
        <li><a href="#">Search</a>
        </li>
        <li><a href="#">Images</a>
        </li>
        <li><a href="#">Maps</a>
        </li>
        <li><a href="#">Play</a>
        </li>
        <li><a href="#">YouTube</a>
        </li>
        <li><a href="#">Gmail</a>
        </li>
        <li><a href="#">Drive</a>
        </li>
        <li><a href="#">More</a>
        </li>
      </ul>
      <ul id="me">
        <li><a href="#">Nida Farooqui</a>
        </li>
        <li><a href="#">0</a>
        </li>
        <li><a href="#">Share...</a>
        </li>
        <li>
          <a href="#">
            <img src="https://lh6.googleusercontent.com/-0HkjOqmEXu8/AAAAAAAAAAI/AAAAAAAAAAA/FQ22oIY4KjM/s24-c-mo/photo.jpg" width="24px" height="24px" alt="Nida Farooqui">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-04-512.png" width="20px" height="20px">
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="google-search">
    <img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="logo">

    <form>
      <input type="search" placeholder="Search Google or type URL" name="search" class="search">
    </form>

    <div class="buttons">
      <button>Google Search</button>
      <button id="lucky-button">I'm Feeling Lucky</button>
    </div>
  </div>

  <div id="footer">
    <div id="footer-nav-bar">
      <ul>
        <li><a href="#" class="link">Advertising</a>
        </li>
        <li><a href="#" class="link">Business</a>
        </li>
        <li><a href="#" class="link">About</a>
        </li>
      </ul>
      <ul id="terms">
        <li><a href="#" class="link">Privacy</a>
        </li>
        <li><a href="#" class="link">Terms</a>
        </li>
        <li><a href="#" class="link">Settings</a>
        </li>
        <li><a href="#" class="link">Use Google.com</a>
        </li>
      </ul>

    </div>

  </div>

</body>

</html>
编辑：我编辑了我的代码，就像你们所说的那样，但如果你点击这个链接

  

My Google Page

你会发现它仍然是一样的。

5 个答案:

答案 0 :(得分：2)

我看到了一些导致margin:0财产失效的事情。

在CSS中，删除您在：

上执行的样式设置 
 #navbar {
    margin-top: -10px;
    margin-left: -10px;
 }

//从css中删除上面的内容然后将以下内容添加到正文

body{
    margin: 0;
}

JSFiddle链接 - moment timezone

答案 1 :(得分：1)

您的身体默认边距为8px，make为0px。 

body {
   margin:0px;
}

摆脱你现在拥有的元素的负面位置。你的#header将如下：

#header {
    background-color: #2d2d2d;
    width: 100%;
    height: 30px;
}

答案 2 :(得分：1)

您是否尝试过这样的#header？

#header {
/* top: -10px; */
left: -10px;
background-color: #2d2d2d;
width: 100%;
height: 30px;
position: relative;
padding-left: 18px;
}

答案 3 :(得分：1)

<!DOCTYPE html>
<html lang="en">

<head>

<title>Google</title>
<style>
body{
  margin:0;
}
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;

}

a:hover {
    color: #222;
    background-color: #666666;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
}
a:link, a:visited {
    color: #ccc;
    display: block;
    padding-top: 4px;
    padding-left: 8px;
    padding-bottom: 4px;
    text-decoration: none;
    text-align: center;

}

 #header {
    top: -10px;
    left: -10px;
    background-color: #2d2d2d;
    width: 100%;
    height: 30px;
 }

 #navbar {
    margin-top: -10px;
    margin-left: -10px;


 }

#me {
    float: right;
    margin-top: -24px;
    margin-bottom: 5px;
}



#footer {
    bottom: -150px;
    background-color: #f2f2f2;
    height: 30px;
    clear: both;
    position: relative;
}



#terms {
    float: right;
    margin-top: -24px;
    margin-bottom: 5px;

}


/*font color for the footer links */
.link:link, .link:visited {

    color: #777;
}


.link:hover {
    color: #777;
    text-decoration: underline;
    padding-top: 4px;
    padding-left: 8px;
    padding-bottom: 4px;
    background-color: #f2f2f2;
    box-shadow: none;
}
</style>
</head>

<body>
  <div id="header">
    <div id="navbar">
      <ul>
        <li><a href="#">Google+</a>
        </li>
        <li><a href="#">Search</a>
        </li>
        <li><a href="#">Images</a>
        </li>
        <li><a href="#">Maps</a>
        </li>
        <li><a href="#">Play</a>
        </li>
        <li><a href="#">YouTube</a>
        </li>
        <li><a href="#">Gmail</a>
        </li>
        <li><a href="#">Drive</a>
        </li>
        <li><a href="#">More</a>
        </li>
      </ul>
      <ul id="me">
        <li><a href="#">Nida Farooqui</a>
        </li>
        <li><a href="#">0</a>
        </li>
        <li><a href="#">Share...</a>
        </li>
        <li>
          <a href="#">
            <img src="https://lh6.googleusercontent.com/-0HkjOqmEXu8/AAAAAAAAAAI/AAAAAAAAAAA/FQ22oIY4KjM/s24-c-mo/photo.jpg" width="24px" height="24px" alt="Nida Farooqui">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-04-512.png" width="20px" height="20px">
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="google-search">
    <img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="logo">

    <form>
      <input type="search" placeholder="Search Google or type URL" name="search" class="search">
    </form>

    <div class="buttons">
      <button>Google Search</button>
      <button id="lucky-button">I'm Feeling Lucky</button>
    </div>
  </div>

  <div id="footer">
    <div id="footer-nav-bar">
      <ul>
        <li><a href="#" class="link">Advertising</a>
        </li>
        <li><a href="#" class="link">Business</a>
        </li>
        <li><a href="#" class="link">About</a>
        </li>
      </ul>
      <ul id="terms">
        <li><a href="#" class="link">Privacy</a>
        </li>
        <li><a href="#" class="link">Terms</a>
        </li>
        <li><a href="#" class="link">Settings</a>
        </li>
        <li><a href="#" class="link">Use Google.com</a>
        </li>
      </ul>

    </div>

  </div>

</body>

</html>

尝试将此添加到css 

body {
    margin: 0;
}

答案 4 :(得分：1)

我查看了您的来源，并且页面仍显示身体的8px边距。尝试将!important添加到css中的body边距。 !important允许您在发生冲突css的情况下设置首选项。

body{margin:0 !important;}
相关问题
最新问题