html - 当我缩小屏幕时，菜单中出现文字

Question

我正在为自己制作一个网站。 我从菜单开始，但如果我将屏幕变小，文本就会从菜单中出来，我会遇到一个小问题。

这里是我在 html 中输入的代码:

<div id="header">


            <div id="menu">
                <ul>
                    <li>Home</li>
                    <li>Over mij</li>
                    <li>Ervaringen</li>
                    <li>Contact</li>
                </ul>
            </div>


        </div>

和CSS:

body 
{
    margin: 0px;
    padding: 0px;
}

#menu
{
    width: 100%;
    height: 100px;
    background-color: rgba(53, 43, 35, 0.70);
}

ul
{
    margin: 0px;
    margin-left: 75%;
}

li
{
    display: inline;
    padding-left: 2%;
    font-size: 19px;
    line-height: 100px;
    overflow: auto;
}

Answer 1

你应该从 ul 样式中删除 margin-left

ul{
margin: 0px;
}

如果您希望菜单项位于页面左侧，您只需要向 ul 添加文本显示

ul{
margin:0;
text-align:right;
}

编辑后在此处查看您的演示:https://jsfiddle.net/IA7medd/k6bu3bt8/1/

您还可以将此演示用于适用于所有设备的响应式设计:https://jsfiddle.net/IA7medd/o89pn61t/