我目前正在重新设计我管理的网站，但导航栏出现问题。它使用高分辨率(我目前使用的是 1440x900)完美运行，但当我切换到较低分辨率时，最后几个菜单项被切断。
这是 HTML:
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<img src="LogoGood.gif" alt="LogoGood" width="591" height="224" />
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="writings.html">Writing</a></li>
<li><NOBR><a href="media.html">Media Relations</a></NOBR></li>
<li><a href="events.html">Events</a></li>
<li><NOBR><a href="proofreading.html">Proofreading</a><NOBR></li>
<li><NOBR><a href="work.html">Writing Workshops</a></NOBR></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="About.html">Working With You</a></li>
<li><a href="aboutkathy.html">About Kathy Mayer</a></li>
<li><a href="contact.html">Contact Kathy</a></li>
</ul>
和CSS:
#page-wrap {
background: beige;
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 50px 10px 0px 10px;
padding-bottom: 10px;
}
#main-content {
background: beige;
padding-left: 50px;
padding-top: 80px;
height: 400px;}
#header {
padding-top: 5px;
background: beige;
text-align: center;}
#nav {
float: left;
width: 100%;
background: beige;
height: 80px;
overflow: hidden;
padding: 0;
margin: 10px 0 0 0;
border-bottom: 1px solid rgb(255,23,28);}
#nav ul{
text-align: center;
float: left;
list-style: none;
padding-left: 13px;
margin: auto;}
#nav li {
float: left;
list-style: none;}
#nav li a {
display: block;
padding: 8px 8px;
border-right: 1px solid rgb(255,23,28);}
提前致谢!
最佳答案
我认为这里的主要问题是存在的菜单项数量和定义的高度。元素在那里，但是 #nav 的高度只有 80px。对于较宽的屏幕，这应该不是问题，但对于分辨率较小的屏幕，菜单会被截断，尤其是当高度已经定义时。最重要的是，在单个导航栏中包含很多元素肯定会增加其整体宽度。链接的长名称也有助于增加每个 li 的宽度(例如，“About Kathy Mayer”与“About”相比，“About Me”和“Contact Kathy”与“Contact”相比) .
摆脱这个问题的一种方法是创建两个单独的导航栏。你可能在页面的右上角有“Home”、“About/About Kathy Mayer”和“Contact/Contact Kathy”，使其成为一个单独的导航栏，并将其余的保留在另一个导航栏上，所以你将有两个不同的导航栏。
另一种方法是制作垂直导航栏，这将消除整个问题。
我刚刚想到的另一个想法:您还可以为具有相似标题的元素创建子菜单，例如在一个子菜单下列出“写作”、“校对”和“研讨会”。
希望对您有所帮助。
关于html - 水平导航栏问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8564004/