CSS UL форматирование вызывает перенос других элементов

Question

Надеюсь, что это будет быстро / легко, но я не могу найти правильные условия поиска в Интернете.

Цель

Я хотел бы создать список значков / изображений, размеченных с помощью CSS, в горизонтальное меню. Однако, хотя я достигаю этого эффекта, другие элементы на странице, похоже, не воспринимают его как элемент блока.

Я знаю, что делаю что-то не так (и, вероятно, что-то тривиальное).

(применимо) HTML

<ul id="alist">
<li id="t"><a href="#t"></a></li>
<li id="q"><a href="#q"></a></li>
<li id="i"><a href="#i"></a></li>
<li id="l"><a href="#l"></a></li>
<li id="m"><a href="#m"></a></li>
<li id="p"><a href="#p"></a></li>
</ul>

<h1>T</h1>
Lorem ipsum
<h1>?</h1>
Lorem ipsum
<h1>I</h1>
Lorem ipsum
<h1>L</h1>
Lorem ipsum
<h1>M</h1>
Lorem ipsum
<h1>P</h1>
Lorem ipsum

CSS

ul#alist
{
    display:inline;
    display:block;
    list-style:none;
}

ul#alist li
{
    text-align:center;  
    float:left;
    width:53px;
    height:53px;
    margin:0px 5px 0px 5px;
}

ul#alist li a
{ 
    width:53px;
    height:53px;
    padding:0px;
    display:block;
}

#t
{
    background-image:url(images/T.png);
}

#q
{
    background-image:url(images/Q.png);
}

#i
{
    background-image:url(images/I.png);
}

#l
{
    background-image:url(images/L.png);
}

#m
{
    background-image:url(images/M.png);
}

#p
{
    background-image:url(images/P.png);
}

Текущий результат (Chrome)

Answer 1

Поскольку вы перемещаете элементы списка, вам нужно очистить следующий элемент в HTML, в котором вы хотите прекратить и прекратить отображение:

h1 { clear:both; }

Answer 2

попробуйте добавить что-то вроде этого

#t{
background-image:url(images/t.png);
background-size:100px 100px; /*YOUR IMAGE WIDTH AND HEIGHT*/
padding-left:120px; /*YOUR IMAGE WIDTH PLUS 20px*/
background-repeat:no-repeat;
}