用列表项覆盖div区域的整个空间而不会破坏

Question

不确定如何描述这一点。而是跟随图像可能会清楚。

这就是我所拥有的：

这就是我想要展示的方式（查看完整的div区域）：

HTML结构：

<ul class="block">
    <li class="item"><a href="#">Item</a></li>
    <li class="item"><a href="#">Item</a></li>
    <li class="item"><a href="#">Item</a></li>
</ul>

演示： https://jsfiddle.net/6f2t2bew/

Answer 1

li代码的默认显示类型为list-item，导致每个li从新行开始。当您在图片中显示时，您希望第三个li不是从换行符开始，而是从第二个li finsihed开始。对于那套

.block li {
  display: inline
}

编辑：您正在向li提供浮动，这会导致它们像块级别一样行动，li的整个内容开始像一个趋势单位去左边。为了避免这种情况，请将浮动移除为：
https://jsfiddle.net/6f2t2bew/1/

此外，如果您想要更多文本理由，请将text-align: justify应用于父ul。

Answer 2

您是否尝试删除float: left上的li？当然，在@ user31782建议的同一元素上使用display: inline;。

所以.footer-top li的css看起来像是：

.footer-top li {
  list-style-type: none;
  margin: 0;
  color: #d9d9d9;
  position: relative;
  display: inline; 
}

Answer 3

你写了＆＃39; clas＆＃39;在代码的第一行。尝试将其更改为＆＃39; class＆＃39;。