div ul li 加a 错位问题

最近写页面过程中出现问题，在li 中包含的<a>元素，切内容是中文和字母交杂的状况下页面排版错位。造成这个原因有两点

1.li{ float:left}没设置。

2.中文和字母交杂时没有定义li的高度。

html如下。

<div id="link_list">
<ul>
<li><a href="#">腾讯旅游 |</a></li>
<li><a href="#">春秋航空</a> |</li>
<li><a href="#">乐途旅游网</a> |</li>
<li>途牛旅游网 |</li>
<li>51766旅游网 |</li>
<li>沈阳旅游网 |</li>
<li>万国商业网 |</li>
<li>19楼空间 |</li>
<li>慧聪网 |</li>
<li>第三媒体 |</li>
<li>美丽说 |</li>
<li><a>京酒店北京酒店北京酒店北京酒店<a> |</li>
<li>香港酒店 |</li>
<li>青岛酒店 |</li>
<li>杭州酒店 |</li>
<li>上海酒店 |</li>
<li>深圳酒店 |</li>
<li>如家快捷 |</li>
<li> <a>7天酒店00000000000000000000000000000000 </a>|</li>
<li>汉庭连锁 |</li>
<li>速8连锁 |</li>
<li>格林豪泰 |</li>
<li>锦江之星 |</li>
<li>酒店评论 |</li>
<li>连锁酒店北京机票 |</li>
<li>深圳机票 |</li>
<li>上海机票 |</li>
<li>海南航空 |</li>
<li>深圳航空 |</li>
<li>厦门航空 |</li>
<li>山东航空 |</li>
<li>南京机票 |</li>
<li>上航推荐 |</li>
<li>川航机票 |</li>
<li>春秋机票 |</li>
<li>国航特价 |</li>
<li>飞机票 |</li>
</ul>
</div>

css如下

#link_list {
float: left;
margin:7px;
}
#link_list li
{
float:left;
white-space:nowrap;
margin:3px 4px;
height:21px;/*不设置则会出现错位置*/
}