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;/*不设置则会出现错位置*/
}