Question

现在我的网站看起来像这样：

example1 http://i58.tinypic.com/10psj9e.png

但我希望它看起来像这样：

example2 http://i59.tinypic.com/2eeifk6.jpg

显然我不希望这样的文字。它是拉伸的副产品。

CSS：

@charset "utf-8";
   /* CSS Document */
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
   }

    li {
      float: left;
       }

   a.Nav_Links:link, a.Nav_Links:visited {
  display: block;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  text-transform: uppercase;
  }

  a.Nav_Links:hover, a.Nav_Links:active {
  background-color: #7A991A;
}

HTML：

 <!doctype html>
  <html>
  <head>
    <meta charset="utf-8">
       <title>My Name</title>
    <link href="Horizontal_Nav_Bar.css" rel="stylesheet" type="text/css">
  </head>
   <body style="background:white">
     <div class="Banner" id="banner">
     <h1 style="text-align:center; color:red; font-size:5em"> My Name</h1>
     </div>


     <div class="Nav_Bar">
      <ul>  <!-- Fix links # -->
        <li><a  class="Nav_Links" href="#home">About Me</a></li>
        <li><a  class="Nav_Links" href="#news">LinkedIn</a></li>
        <li><a  class="Nav_Links" href="#contact">Research</a></li>
        <li><a  class="Nav_Links" href="#about">Pictures</a></li>
      </ul>
      <!-- About Me, Link to Linked in, Research Projects, Resume, etc Pictures   -->

       </div>


   </body>
   </html>

另外，请随意批评我的代码。

Answer 1

您想要在列表项中指定宽度。

<强> CSS

li {
    float: left;
    width: 25%; /* Split width appropriately */
}

假设你分开你的宽度，其他一切都会正常工作。

的 DEMO JSFiddle

响应式布局

因为我非常喜欢让所有设备都能正常工作，所以我还提供了以下CSS，让您的网站在缩小到移动设备时看起来不错。

<强> CSS

@media screen and (max-width: 460px) { li { width: 100% !important; float:none !important; } }

如果您想使用此功能，这非常取决于您，但我认为这会让您的网站缩小到一个不错的尺寸，同时保留所有内容＆＃34;漂亮＆＃34;。

的 DEMO JSFiddle

<强> 编辑：

媒体查询：媒体查询是CSS3的一部分，它允许根据屏幕大小呈现某些内容。可以找到更多信息here。

！important：这是一个允许浏览器知道以下CSS行非常相关的属性，无论如何都应该呈现。它基本上覆盖了任何其他声明，这实际上可以在我上面给出的演示中看到。 这被认为是不好的做法，因为它会覆盖您的样式（事物的自然流动），使得调试可能发生的未来问题变得更加困难 。您可以阅读here。

响应式网页设计：这是让网站响应用户可能用于查看您网站的屏幕尺寸/实体的过程。通俗地说，您希望您的网站在所有设备/屏幕尺寸上看起来都很漂亮，而不是渲染相同的网站（意味着您为宽度/高度设置固定值等）。您最初可以开始阅读更多信息here。一旦您认为您对该概念有了非常深刻的理解，请尝试在线查看视图示例。

但BB，为什么选择MDN？

如果您没有注意到，我的所有链接都指向MDN，Mozilla开发者网络，这是一个很好的资源，您可以通过此website引用很多内容。尽量避免像W3 Schools那样愚蠢的地方。

Answer 2

把它放在宽度：100％; 并将背景颜色放在导航栏中。

Nav_Bar {
    width: 100%;
    background-color: #7A991A;
}

全宽导航栏 - CSS

2 个答案:

的 DEMO JSFiddle

响应式布局

的 DEMO JSFiddle

<强> 编辑：