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;
}