logo标签列表

水平导航栏问题

htmlcssnavbar
3

我目前正在重新设计一个我管理的网站，并且导航栏出现了问题。在高分辨率下（我目前使用的是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);}

感谢您的提前帮助！
1
我认为你的代码不完整，li元素的样式在哪里？另外，你能在jsfiddle上发布一个可工作的示例吗？（最好不要使用<nobr>，而是使用css white-space:nowrap代替...） - ptriek
如果元素被切割掉了，很可能与设置为hidden的"overflow"属性有关。一个可运行的示例肯定会有所帮助，但是请朝这个方向查看一下。 - Frank Parent
@FrankParent 我删除了overflow:hidden的CSS，重新加载页面并更改了分辨率。这次菜单项出现了，但在下一行。有什么办法可以解决这个问题吗？ - Matt Altepeter
2个回答
1

我认为这里的主要问题是菜单项的数量和定义的高度。这些项目都在那里，但是#nav的高度只有80px。对于更宽的屏幕，这不应该是一个问题，但对于分辨率较小的屏幕，特别是当高度已经定义时，菜单将被截断。此外，在单个导航栏中拥有大量项目肯定会增加其总宽度。链接名称过长也有助于增加每个li的宽度（例如，“关于Kathy Mayer”与“关于”或“关于我”以及“联系Kathy”与“联系”相比）。

解决此问题的一种方法是创建两个单独的导航栏。您可以在页面右上角放置“主页”、“关于/关于Kathy Mayer”和“联系/联系Kathy”，使其成为单独的导航栏，并将其余部分保留在另一个导航栏中，这样您将拥有两个不同的导航栏。

另一种方法是制作垂直导航栏，这将消除整个问题。

我刚想到的另一个想法：您还可以为具有类似标题的项目使用子菜单，例如在一个子菜单下列出“写作”、“校对”和“研讨会”。

希望我有所帮助。

0
更改最小宽度并没有解决问题，缩小菜单也没有。将菜单的宽度缩小只会截断超过该宽度的其余菜单项。还有其他建议吗？ - Matt Altepeter
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接