Сокрытие полного пространства div с элементами списка без разрыва

Question

Не знаете, как это описать. Вместо этого следующие изображения могут дать понять.

Это то, что у меня есть:

И это, как я хочу, чтобы показать, что (проверьте область полного ДИВ прикрыла):

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 
} 

Edit: Вы даете поплавка слева li с, которые заставляют их действовать как своего рода уровне блоков и всего содержания li начинают действовать как единое целое, которое стремится идти налево. Чтобы избежать этого удалить поплавка влево, как:
https://jsfiddle.net/6f2t2bew/1/

Кроме того, если вы хотите больше оснований текста затем применить text-align: justify к родителю ul.

Answer 2

Вы написали 'clas' в первой строке вашего кода. Попробуйте изменить его на «класс».

Answer 3

Вы пытались удалить float: left на свой li? Конечно, используйте display: inline; на том же элементе, что и @ user31782.

Таким образом, ваш CSS для .footer-top li выглядит следующим образом:

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