ul,li的CSS

最新推荐文章于 2022-03-20 22:35:15 发布

原创最新推荐文章于 2022-03-20 22:35:15 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #IE #Firefox #XHTML #HTML

一、Firefox中ul的问题。
ul属性中如果没有声明，在Firefox中不会靠右，而是隔了一段距离，在ul属性中加上padding:0;或者padding-left:0;即可解决问题。

二、li不显示点号

参考：

UL、LI加上float，在IE 7于IE 8有相当大的差异，见：

<!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>
    <title></title>
</head>
<body>
<div>
    <div>
        <ul>
            <li style="cursor: hand;float:left; " >
                TEST1 </li>
            <li style="cursor: hand;float:left; ">
                TEST2 </li>
            <li style="cursor: hand;float:left; ">
                TEST3 </li>
            <li style="cursor: hand;float:left; ">
                TEST4 </li>
            <li style="cursor: hand;float:left; ">
                TEST5 </li>
        </ul>
    </div>
    </div>
</body>
</html>

(IE 7)

(IE

在IE 7上，LI的项目符号被取消了，而在IE 8上则正常显示，但却因为是float，所以后面的项目符号盖到前一项目了。修改为程式8的模样后，

两者就趋近相同了。

<!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>
    <title></title>
</head>
<body>
<div>
    <div>
        <ul style="list-style-type:none">
            <li style="cursor: hand;float:left; " >
                TEST1 </li>
            <li style="cursor: hand;float:left; ">
                TEST2 </li>
            <li style="cursor: hand;float:left; ">
                TEST3 </li>
            <li style="cursor: hand;float:left; ">
                TEST4 </li>
            <li style="cursor: hand;float:left; ">
                TEST5 </li>
        </ul>
    </div>
    </div>
</body>
</html>