HTML背景不占用整个屏幕空间_Html_Css

HTML背景不占用整个屏幕空间

html css

HTML背景不占用整个屏幕空间,html,css,Html,Css,我正在尝试使用html重新创建网站的这一简单部分，只是为了练习：以下是迄今为止我的html代码： <!DOCTYPE html> <html> <head> <style> .green{ color:lightgreen; } ul{ background-color:lightgray; display:inline; padding:10px; } li{ background-color:lightbl

我正在尝试使用html重新创建网站的这一简单部分，只是为了练习：

以下是迄今为止我的html代码：

<!DOCTYPE html>
<html>
<head>
<style>
.green{
   color:lightgreen;
}

ul{
   background-color:lightgray;
   display:inline;
   padding:10px;
}

li{
   background-color:lightblue;
   color:light-gray;
   display:inline;
   margin:20px;
}

a:hover{
   color:orange;
}

a{
   text-decoration:none;
}
</style>
</head>

<body>

<h3 class="green">Display Inline-Block Demo</h3>
<ul>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">Result</a></li>
</ul>

</body>

</html>


格林先生{
颜色：浅绿色；
}
保险商实验室{
背景颜色：浅灰色；
显示：内联；
填充：10px；
}
李{
背景颜色：浅蓝色；
颜色：浅灰色；
显示：内联；
利润率：20px；
}
a:悬停{
颜色：橙色；
}
a{
文字装饰：无；
}
显示内联块演示

我遇到的主要问题是，当我在w3school html文本编辑器（）中运行html代码时，“html”、“CSS”和“RESUlT”文本下的灰色背景只占据了屏幕空间的一部分，而不是一直到屏幕边缘。这是我用上面的代码得到的输出（下面图片的右侧也是空白）：

有没有办法让灰色背景延伸到整个屏幕？非常感谢您提前提供的帮助

更改ul和li的显示，使灰色ul横跨整个宽度：

ul{
   background-color:lightgray;
   display:block;
   padding:10px;
}

li{
   background-color:lightblue;
   color:light-gray;
   display:inline-block;
   margin:20px;
}

此外，这里还对块与内联块与内联块进行了很好的讨论：


格林先生{
颜色：浅绿色；
}
保险商实验室{
背景颜色：浅灰色；
显示：内联块；
填充：10px；
宽度：100%；
边际：0px；
}
李{
背景颜色：浅蓝色；
颜色：浅灰色；
显示：内联块；
利润率：20px；
}
a:悬停{
颜色：橙色；
}
a{
文字装饰：无；
}
显示内联块演示

只需删除

标签的显示：inline

ul{
   background-color:lightgray;
   padding:10px;
}

fiddle:
事实上，我刚刚意识到我可以在我的ul-CSS类选择器中添加一个padding值，只需说padding:300px；这是正确的方法吗？因为它在不同的屏幕尺寸上看起来仍然不同。太棒了！非常感谢你的建议！我不知道为什么我以前没有想到这一点。我刚刚在ul中添加了一行，上面写着display:block；这就是你的意思对吗？是的。将css中的两个显示行替换为上述内容。阅读该链接以更好地理解块、内联块和内联块之间的差异。好的！非常感谢你的帮助@克莱霍德：是的。参考好！非常感谢你的帮助！