当我将屏幕缩小时，菜单中出现文本

Question

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

这里我有我输入的代码：

<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/

Answer 2

好吧，如果您希望在更小的屏幕上显示完整菜单，您可以使用媒体查询。

就像在这个小提琴中一样：https://jsfiddle.net/odn0Lzfc我添加了以下媒体查询，其余代码是相同的。

@media screen and (max-width:768px){
  ul{
    margin-left: 0;
  }
}
@media screen and (max-width:480px){
  li{
    font-size: 16px;
  }
}

它将根据各种屏幕尺寸调整您的内容。

点击此处了解有关媒体查询的详情：https://css-tricks.com/snippets/css/media-queries-for-standard-devices

Answer 3

为li标签添加分词和空格属性。

   li {  word-break: break-word;
        white-space: normal;
    }