Question

我正在创建一个静态网站，其中有一个简单的导航栏。我没有进行复杂的设计。我面临的唯一问题是当我调整窗口文本移动时。我怎么能避免这种情况？以下是代码片段：

<div id="menu">
<div id="navcontainer">
    <ul>
        <li><a href="#">Milk</a></li>
        <li><a href="#">Eggs</a></li>
        <li><a href="#">Cheese</a></li>
        <li><a href="#">Vegetables</a></li>
        <li><a href="#">Fruit</a></li>
    </ul>
</div>
</div>

html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        #menu{
            width: 50%;
        }

        #navcontainer ul
        {
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-align: center;
        }

        #navcontainer ul li { display: inline; }

        #navcontainer ul li a
        {
            text-decoration: none;
            padding: .2em 1em;
            color: #fff;
            background-color: #036;
        }

        #navcontainer ul li a:hover
        {
            color: #fff;
            background-color: #369;
        }

Answer 1

以像素为单位应用固定填充。

    #navcontainer ul li a
    {
        text-decoration: none;
        padding: xxpx xxpx;
        color: #fff;
        background-color: #036;
    }

xx - ＆gt;任何数字（以像素为单位）。

不要使用em。你可能应该对菜单的宽度做同样的事情。你可以尝试一下。

Answer 2

将菜单的宽度设置为auto：

#menu {
    width: auto;
}

Answer 3

如果您想避免ul移动，请进行定位。喜欢

div#navcontainer {
left: 50px;
position: absolute;
max-width:400px;

}

Answer 4

您需要将＃menu 宽度从％更改为 px （ 50％ - ＆gt; 1349px ）并添加 max-width ：1349px;的最小宽度：1349px;

＆＃13;
＆＃13;
<div id="menu"> <div id="navcontainer"> <ul> <li><a href="#">Milk</a> </li> <li><a href="#">Eggs</a> </li> <li><a href="#">Cheese</a> </li> <li><a href="#">Vegetables</a> </li> <li><a href="#">Fruit</a> </li> </ul> </div> </div> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; } #menu { width: 1349px; max-width: 1349px; min-width: 1349px; } #navcontainer ul { margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: inline; } #navcontainer ul li a { text-decoration: none; padding: .2em 1em; color: #fff; background-color: #036; }
＆＃13;
＆＃13;
＆＃13; 你可以试试另一个 px 我希望我回答你的问题^^

Answer 5

您已为菜单指定了基于百分比的宽度，这意味着它的宽度将为父级的50％，这也恰好是窗口宽度的50％。如果您将窗口的大小调整为较小，则菜单也将以相同的比例调整大小。

当然，当内容应用于页面时，Web浏览器将努力显示它。要做到这一点，就像你输入一个段落一样，如果没有更多的空间，它就会掉到下一行。这就是内联元素的作用。如果要隐藏它，可以设置菜单的高度，然后使用overflow:hidden;在文本丢失时不显示文本。另一个选项是您可以使用vw单位将文本大小设置为相对于页面宽度，这与视口宽度成比例。

#menu{
   font-size:10vw;
}

调整窗口导航栏文本大小时移动

5 个答案: