Question

我在导航div上使用了border-bottom，这是100％宽。当我调整浏览器窗口的大小时，边框底部会突然缩小到我刚刚调整浏览器的大小。

有谁知道这个解决方案？

我的css：

#nav {
clear: both;
height: 40px;
width: 100%;
text-align: center;
border-bottom: 3px #ff6600 solid;
}

#nav ul {
margin: 0 0 0 670px;
white-space: nowrap;
}

#nav ul li {
display: inline-block;
list-style-type: none;

}

#nav ul li a {
display: inline-block;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000;
text-transform: uppercase;
letter-spacing: 3.5px;
}

我的HTML

<div id="nav">
            <ul>
               <li><a href="index.html">Home</a></li>
               <li><a href="about.html">About</a></li>
               <li><a href="portfolio.html">Portfolio</a></li>
               <li><a href="hobby's">Hobby's</a></li>
               <li><a href="links.html">Links</a></li>
               <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>

Answer 1

通过指定670px左边距值，您可以有效地为页面设置宽度。

因此，如果页面调整为小于该值的页面（或加上列表项中的文本），则会显示事物因为超出窗口框架而被切断。

为了使宽度基于窗口大小完全动态，您需要绝对没有硬编码的设置值。您可以尝试使用％作为边距，或者您可以根据窗口的宽度使用替代css样式。

Answer 2

我找到了答案！

通过查看其他帖子，有人说100％宽度仅适用于屏幕的“视口”。这就是为什么div被切断了。

要解决此问题，您必须在css中向主体添加 min-width（以像素为单位）。

所以在我的情况下我改为：

body {

min-width: 1439px;

}

Answer 3

我认为这种方式更好

更改

#nav ul {
    margin: 0 0 0 670px;
    white-space: nowrap;
}

到

#nav ul {
    float: right; // instead of margin: 0 0 0 670px;
    margin: 0; //reset ul default properties 
    padding: 0; //reset ul default properties 
}

也改变了这个

#nav ul li a {
    display: inline-block;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 3.5px;
}

到

#nav ul li a {
    display: inline-block;
    padding: 0 20px; // padding only for left and right, just use line-height instead of padding-top and padding-bottom
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    line-height: 40px; // same value as navigation height (#nav) , no need to use padding for top and bottom
}

CSS - 当我调整浏览器大小时，我的边框底部会调整大小

3 个答案: