Html 导航赢得'；"；“中断”；如果居中，则落在新行上
我正在尝试为我的表弟创建一个网站，他一行代码都不懂。而我几乎没有：D 我可以了解一些基本的东西 但我似乎不知道怎么做导航栏。我面临的问题是，我正在努力使网站具有响应性。现在，当将窗口大小调整为较小尺寸时（即导航条按设想堆叠到自身上），代码可以正常工作。但是我希望四（4）个链接相对于标题居中 正如您将看到的，页眉两侧都有13%的填充。然后，我希望导航栏位于其余74%的中心。希望这有意义，我打赌你们比我做得好 我没有网站托管还没有，所以你将不得不看到自己的代码 我尝试添加Html 导航赢得'；"；“中断”；如果居中，则落在新行上,html,css,Html,Css,我正在尝试为我的表弟创建一个网站，他一行代码都不懂。而我几乎没有：D 我可以了解一些基本的东西 但我似乎不知道怎么做导航栏。我面临的问题是，我正在努力使网站具有响应性。现在，当将窗口大小调整为较小尺寸时（即导航条按设想堆叠到自身上），代码可以正常工作。但是我希望四（4）个链接相对于标题居中 正如您将看到的，页眉两侧都有13%的填充。然后，我希望导航栏位于其余74%的中心。希望这有意义，我打赌你们比我做得好 我没有网站托管还没有，所以你将不得不看到自己的代码 我尝试添加宽度：25%和宽度：计算（1
宽度：25%和宽度：计算（100/4）但当我给它加上宽度时，它会按我所希望的那样居中，但它不会落下/断开到新行上，而是滑动到彼此之间
非常感谢您的帮助
以下是HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/index.css">
<title>Fanny Schwarz Design</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="main_img/fanny_schwarz_logo.jpg" class="logo" alt="Fanny Schwarz logo">
</div>
<div id="navigation">
<ul>
<li>
<a href="home.html">
♦<span style="font-size:2em;">home</span>♦
</a>
</li>
<li>
<a href="portfolio.html">
♦<span style="font-size:2em;">portfolio</span>♦
</a>
</li>
<li>
<a href="about.html">
♦<span style="font-size:2em;">about</span>♦
</a>
</li>
<li>
<a href="contact.html">
♦<span style="font-size:2em;">contact</span>♦
</a>
</li>
</ul>
</div>
<div id="content">
<h2>Page heading</h2>
<p>Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id="footer">
<div>
<span style="vertical-align:middle; font-size:2em;">©</span>
<span style="font-size:1em; vertical-align:middle;">fanny schwarz 2014</span>
</div>
</div>
</div>
</body>
</html>
以下是导致您出现问题的CSS样式：
#navigation ul {
overflow:hidden;
}
#navigation ul li {
float:left;
text-align:center;
width: 25%;
}
将其更改为：
#navigation ul {
width:100%;
text-align:center;
margin:0 auto;
padding:0;
}
#navigation ul li {
list-style:none;
display:inline-block;
}
这会解决你的问题。原因是:
overflow:hidden
将在移动浏览器上隐藏从li
中移出的内容float:left
没有什么问题，只是您试图将li
s居中。如果应用了浮动：左
样式，则无法执行此操作我想你是想把text align:center
放在ul
上，而不是li
上
width:25%
导致您的li
s重叠，而不是中断到下一行#navigation ul {
width:100%;
text-align:center;
margin:0 auto;
padding:0;
}
#navigation ul li {
list-style:none;
display:inline-block;
}