现在我的网站是这样的:
但我希望它看起来像这样:
显然我不想要那样的文本。这是拉伸(stretch)的副产品。
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>
此外，请随时批评我的代码。
最佳答案
您将要在列表项中指定宽度。
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;
}
}
如果您想使用它，这在很大程度上取决于您，但我认为它可以让您的网站缩小到一个合适的大小，同时还能保持一切“漂亮”。
DEMO JSFiddle
编辑:
媒体查询:媒体查询是 CSS3 的一部分，它允许根据屏幕尺寸呈现某些内容。可以找到更多信息here .
!important:这个属性让浏览器知道下面的 CSS 行非常相关，无论如何都应该呈现。它基本上覆盖了任何其他声明，这实际上可以在我上面给你的演示中看到。 这被认为是不好的做法，因为它会覆盖您的样式(事物的自然流程)，使调试 future 可能发生的问题变得更加困难。你可以阅读那个 here .
响应式网页设计:这是使网站响应用户可能用来查看您网站的屏幕尺寸/实体的过程。用外行的话来说，您希望您的网站在所有设备/屏幕尺寸上看起来都不错，而不是呈现相同的网站(意味着您将它的宽度/高度等设置为固定值)。您可以先开始阅读更多信息 here .一旦您觉得自己对这个概念有了相当扎实的理解，请尝试在线查找 View 示例。
可是BB，为什么选择MDN呢？
如果你没有注意到，我所有的链接都指向 MDN，Mozilla 开发者网络，这是一个很好的资源，你可以通过这个 website 引用很多东西。 .尽量避免像 W3 Schools 这样愚蠢的地方.
关于html - 全宽导航栏 - CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24725832/