0

今天是个好日子，

我正在为当地的天文俱乐部开发一个网站，我正在免费做这个网站，以建立我的投资组合和技能组合。

我在页面顶部的标题中有一个导航栏。当我缩小到大约 90% 时，导航栏中的元素会四处移动，导致布局看起来有点时髦。

如果有帮助，我有一个活生生的例子

http://www.JamesRobertCook.com/BCAAS/

这是我的导航栏的 HTML：

<div id="header_bar">
    <div id="nav">
        <div id="cssmenu">
                <ul>
                   <li class="active"><a href="index.html"><span>Home</span></a></li>
                   <li class="has-sub"><a href="#"><span>Products</span></a>
                      <ul>
                         <li class="has-sub"><a href="#"><span>Product 1</span></a>
                            <ul>
                               <li><a href="#"><span>Sub Item</span></a></li>
                               <li class="last"><a href="#"><span>Sub Item</span></a></li>
                            </ul>
                         </li>
                         <li class="has-sub"><a href="#"><span>Product 2</span></a>
                            <ul>
                               <li><a href="#"><span>Sub Item</span></a></li>
                               <li class="last"><a href="#"><span>Sub Item</span></a></li>
                            </ul>
                         </li>
                      </ul>
                   </li>
                   <li><a href="#"><span>About</span></a></li>
                   <li class="last"><a href="#"><span>Contact</span></a></li>
                </ul>
        </div>
    </div>

这是相关的CSS：

#header_bar {
background: rgba(44, 44, 44, 0.75);
height: 36px;
margin: 0 auto;
}

#nav {
height: 36px;
margin: 0 auto;
width: 960px;
}

#cssmenu {
height: 36px;
background-color: rgb(44, 44, 44)s;
}

#cssmenu ul {
margin: 0;
padding: 0;
}

#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;

#cssmenu > ul > li > a {
color: rgb(160,160,160);
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 36px;
padding: 15px 85px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;

我认为将它贴在容器内并给它一个固定的高度/宽度就可以了，但我在本地尝试过，但没有成功。

谢谢你的帮助！如果可能的话，你能解释一下我做错了什么吗？我想从我的错误中吸取教训！

谢谢！

编辑

我刚刚注意到，在缩放时，我的三个“特色”框中的内容也与它所在的相应 div 重叠！我当然弄坏了一些东西。

4

3 回答 3

1

如果您不希望文本穿过边界，您的 div 元素需要变得更高，或者您需要在它们上设置溢出，但除此之外，我看不到您的 div 元素在哪里做任何不寻常的事情。它们是静态大小的，它们不会改变任何东西的大小。它们“移动”是因为用户正在调整大小/缩放，并且在此期间它们不能保持静止。您必须找到一种方法来阻止您的用户调整大小/缩放以防止任何变化。

于 2013-06-18T19:08:45.780 回答
1

我很抱歉。我在页面上进一步查看内容 div 时偏离了方向，完全失去了对您真正问题的关注。我希望对您最初的问题的简单解决方案能帮助您原谅我。

#header_bar {
    background: rgba(44, 44, 44, 0.75);
    height: 36px;
    margin: 0 auto;

    min-width: 960px;
}

那min-width: 960px;（960px是 960 像素，与页面的其他主要内容的宽度相同）意味着<div>withid="header_bar"不能小于960px这使得它适合您的其余内容，即使有人在超低视图上查看分辨率，调整浏览器窗口大小或放大很远。

再次，很抱歉完全搞砸了，但在旁注中，如果您有兴趣，我相信我可以就一些事情给您一些指示。例如，您似乎在页面中过度使用<div>'s 和<span>'s。这两个元素不仅可以接收您已应用于它们的某些样式，并且在某些情况下，子元素或这些元素的父元素可以接收样式，并且您可以完全消除这些元素。

如果您想对提示和提示等进行更详细的解释，我喜欢为想法和讨论编程/开发而玩音板，我想我可以向您展示我多年来学到的一些对您有帮助的东西。

于 2013-06-19T17:58:42.213 回答
1

尝试使用%作为单位而不是px为<li>（列表项）分配宽度

（即）如果你在你的<li>菜单中使用五个，分配width:20%给<li>

于 2013-06-19T04:20:50.887 回答