html - Google 的导航栏不适合整个宽度

标签 html css

我正在尝试重新创建 www.google.com 页面来学习 css，但我无法让导航栏横跨整个页面，即使我已尝试使用 宽度:100%。和 margin:0在 ul 元素和 body 元素上(它对 body 元素没有影响，所以我从那里删除了它)

我也试过用

position:absolute;
left:0;
right:0;

在我的 #header id 中，但这也不起作用。

您可以在下图中看到导航栏没有横跨页面的整个宽度。如果您无法正常查看图片，您可以通过以下链接查看图片。

我确信这与我放置元素的方式有关，因为当我将鼠标悬停在我的个人资料图片或设置图标上时，它不适合 block 的宽度并超出栏。

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

My Google Page

The navigation bar 

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

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

CSS:

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

编辑:我已经像你们所说的那样编辑了我的代码，但是如果你点击这个链接

My Google Page

你会发现它还是一样的。

最佳答案

我看到一些东西导致你的 margin:0 属性不起作用。

在 CSS 中，删除您在以下方面所做的样式:

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

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

body{
    margin: 0;
}

JSFiddle 链接 - https://jsfiddle.net/ToreanJoel/6kwshsmo/

关于html - Google 的导航栏不适合整个宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33400264/

上一篇：html - 如何在 react 正在渲染的输入上设置自动对焦

下一篇：html模板为每个页面使用相同的标题

相关文章：

html - 调整浏览器大小或放大/缩小时的元素位置

jquery - 我希望文本在页面加载时同时执行某种 fadeIn 和 .slideDown

html - Coldfusion 中的柱形多维数组

jquery - 如何获得默认外观

html - 如何在具有不同属性(CSS)的圆形中拟合颜色？

css - Bootstrap 3 : Collapsible nav won't close

javascript - 使用 Javascript 制作表格

css - 将输入和按钮分组

javascript - 保持下拉列表向下滑动直到鼠标移到子项上的问题

css - 即使我将它与自己的样式表分开，我的媒体查询也不会工作？

©2024 IT工具网  联系我们