Question

我正在尝试使用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>

我遇到的主要问题是，当我在w3school html文本编辑器（http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default）中运行我的html代码时，“HTML”，“CSS”和“RESUlT”文本下的灰色背景是只占用屏幕空间的一部分而不是一直走到屏幕边缘。这是我上面的代码获得的输出（下图右侧是所有空格）：

有什么方法可以让灰色背景跨越整个屏幕？非常感谢您的帮助！

Answer 1

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

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

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

此外，这里有关于块与内联与内联块的良好讨论：CSS display: inline vs inline-block

Answer 2

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    .green {
      color: lightgreen;
    }
    ul {
      background-color: lightgray;
      display: inline-block;
      padding: 10px;
      width: 100%;
      margin: 0px;
    }
    li {
      background-color: lightblue;
      color: light-gray;
      display: inline-block;
      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>

＆＃13;

Answer 3

您只需删除$somevar: unquote("14px/17px");代码的display:inline。

ul

小提琴：this

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

3 个答案: