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

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

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

html如下。

<div >乐途旅游网</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;/*不设置则会出现错位置*/
}

相关文章:

  • 2021-12-20
  • 2022-12-23
  • 2022-12-23
  • 2021-04-09
  • 2022-02-25
  • 2022-01-04
  • 2022-12-23
猜你喜欢
  • 2021-06-16
  • 2022-12-23
  • 2021-07-07
  • 2021-11-29
  • 2021-10-08
  • 2021-10-16
相关资源
相似解决方案