横排Li的自适应宽度

最新推荐文章于 2021-01-25 10:45:54 发布

陌上风情

最新推荐文章于 2021-01-25 10:45:54 发布

阅读量1.4w

点赞数

本文链接：https://blog.csdn.net/liuyong0818/article/details/4820730

版权

我们在做网页导航的时候，最常用的就是让Li左浮，但是浮动对象要给固定宽度，不然在ie下会出现撑开的情况，导航的话没有问题，一般都是两个字或者四个字，固定宽度也比较美观，今天就碰到一个问题是翻页代码用浮动li实现，因为页码有一位数，两位数，还有三位数四位数，那么固定宽度显然不能满足要求，于是乎，改用li的display:inline；问题解决了，实现同样的效果，宽度自适应^_^

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横排Li的自适应宽度</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">* { margin:0; padding:0; } ul,li { list-style:none; } .content{ margin-left:30px; border:1px #0066CC solid; padding:2px; font-size:12px; } .content ul { height:30px; } .content li { display:inline; margin:2px 10px; background-color:#999999; } .content li a { padding:5px; }</style> </head> <body> <div class="content"> <ul> <li><a href="#" mce_href="#">这个是汉字</a></li> <li><a href="#" mce_href="#">This is some english words!</a></li> <li><a href="#" mce_href="#">这个是汉字+This is some english words!</a></li> </ul> </div> </body> </html>

今天又碰到float的固定宽度，内容无法显示完全，再来纪念一下，发誓以后坚决不用float。

陌上风情

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
横排Li的自适应宽度

我们在做网页导航的时候，最常用的就是让Li左浮，但是浮动对象要给固定宽度，不然在ie下会出现撑开的情况，导航的话没有问题，一般都是两个字或者四个字，固定宽度也比较美观，今天就碰到一个问题是翻页代码用浮动li实现，因为页码有一位数，两位数，还有三位数四位数，那么固定宽度显然不能满足要求，于是乎，改用li的display:inline；问题解决了，实现同样的效果，宽度自适应^_^
复制链接

扫一扫