Question

大家好日子，

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

我页面顶部的标题中有一个导航栏。当我缩小到大约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重叠！我当然打破了一些东西

Answer 1

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

Answer 2

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

（即）如果您在个人菜单中使用了五个<li>，请将width:20%分配给<li>

Answer 3

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

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

    min-width: 960px;
}

min-width: 960px;（960px是960像素，其宽度与网页主要内容的其余部分相同）表示带有<div>的{{1}}可以即使有人观看超低分辨率，调整浏览器窗口大小或缩放到最远的位置，也不会小于id="header_bar"使其与其他内容相符。

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

如果你想要更详细的解释提示和提示等，我喜欢在创意板上讨论想法和讨论编程/开发，我想我可以向你展示我多年来学到的一些可以帮助你的东西

在缩放时如何阻止我的div移动？

3 个答案: