li标签为啥去掉list-style-type:none;后，width就不起作用了呢？

问题描述

li标签为啥去掉list-style-type:none;后，width就不起作用了呢？

代码如下，详细问题在代码注释边

 #topnav{
                height:36px;
                background-color:silver;
                border: 1px solid seagreen;
            }
            #topnav ul{
                /*line-height:30px;*/
                margin: 5px;
                padding: 0px;
                border-bottom: solid;
                border-bottom-width: 2px;
                border-bottom-color: darkgreen;
                float :left;
               list-style-type: none;

            }
            #topnav li{
                float: left;
                padding: 0px;
                list-style-type: none;/*为何没有它后，宽度失效了？*/
                width: 62px;
                text-align: center;
                margin: 0px 0px 0px 5px;
                border: 2px solid darksalmon;
                background-color: mediumorchid;

            }
            #topnav li a{
                font-family:arial;
                padding: 4px;/*想要使得块状区域更大些，但并没有啥作用，把display: block;去掉后，就会超出li标签的宽度，这是怎么回事*/
                text-decoration:none;
                color:tan;
                display: block;

            }
            #topnav li a:hover{
                background-color: khaki;
                color: darkcyan;

            }
            #topnav li#select {
                background-color: darkorange;
                background-repeat :no-repeat;
            }
        </style>
    </head>
    <body>
        <div id ="topnav">
        <ul>
            <li id="select"><a href ="#">jlajla</a></li>
            <li><a href ="#">jlajla</a></li>
            <li><a href ="#">jlajla</a></li>
            <li><a href ="#">jlajla</a></li>
        </ul>
        </div>

    </body>

解决方案

不会的，没影响，这段代码chrome和ie都没问题，去掉list-style-type: none;后也没问题。
看看是不是注释有问题，导致下面样式没生效

时间： 2024-08-03 12:23:09

li标签为啥去掉list-style-type:none;后，width就不起作用了呢？的相关文章

关于去掉Li标签前面的小圆点和距离/显示下划线

解决方法去掉Li标签前面的距离: 设置ul padding:0px; 去掉Li标签前面的小圆点: 设置li list-style-type:none; 显示下划线: text-decoration:underline;

1.一般制作文字环绕图片效果. HTML结构: View Code <!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>

LI标签中内容超过长度后以省略号显示的方法

在使用DIV+CSS网页标准制作网页时,LI标签中内容超过长度后以省略号显示的方法. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><meta http-equiv="Content-Type" content="text/html; charset

用html的ul和li标签做图片展示功能示例代码

把下面代码拷贝到dreamweaver 的代码区域,预览时可以显示下面图片,实现了图片展示的功能代码如下: <!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&q

用ul、li标签创建css横向导航菜单示例

创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观.但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白.所以,为了避免所有的链接都挤在一起,你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔,让这些文字分离开来,不至于混在一起. 现在我们正常的做法是应用ul.li标签把链接作为无序列表(unordered list)来标识.再应用CSS样式对其进行控制,按我们预想的形式在容器中显示出来.对导航条使用无序列表似

Jquery和JS获取ul中li标签的实现方法_jquery

js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签或 var div=document.getElementById('a'); var ul=div.childN

JS实现动态增加和删除li标签行的实例代码_javascript技巧

如下所示: function addDepartment() { <span style="white-space:pre"> </span>var x = document.getElementById('department'); <span style="white-space:pre"> </span>var l = x.childNodes.length; <span style="white

html li标签设置value诡异的问题

设置li的value为一串数字,结果获取的时候不是原来的值. 直接上代码: Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>给li标签设置value</title> </head> <body> <li id=&q

css-ul的li标签的宽度不相等问题

问题描述 ul的li标签的宽度不相等问题如图,ul里的Li,下面的线宽度没有填满ul,我猜想是li 前面本来有的圆点占据了位子.怎么改可以让Li的宽度等于ul的宽度解决方案 li设置了float什么的吧,要不去掉padding,margin也不会了ul长度差多少的,都是块级元素,自动占满一行解决方案二: 里面有padding值占了你的位置,注意一下你的盒子模型解决方案三: 设置ul{padding:0}