当我缩小屏幕时，从菜单中出来的文本
当我缩小屏幕时，从菜单中出来的文本
提问于 2016-05-16 21:00:34
我正在为自己做一个网站。我从菜单开始，但我有一个小问题，如果我把我的屏幕变小，文本就会从菜单中出来。
下面是我输入的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;
}回答 3
Stack Overflow用户
发布于 2016-05-16 21:07:30
您应该从ul样式中删除左边界
ul{
margin: 0px;
}如果您希望菜单项位于页面的左侧，则只需在ul中添加文本标记
ul{
margin:0;
text-align:right;
}编辑后请在此处查看您的演示：https://jsfiddle.net/IA7medd/k6bu3bt8/1/
这个演示还可以用于响应式设计，可以在所有设备上运行：https://jsfiddle.net/IA7medd/o89pn61t/
Stack Overflow用户
发布于 2016-05-16 21:13:51
如果你想在更小的屏幕上显示完整的菜单，你可以做的就是使用媒体查询。
就像这个小提琴：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
Stack Overflow用户
发布于 2016-05-16 21:03:51
向li标记添加分词符和空格属性。
li { word-break: break-word;
white-space: normal;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37254531
复制相关文章
相似问题
腾讯云开发者
