baidu_34197758
小小笔记
采纳率80%
2016-03-30 05:18 阅读 2.8k

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • danielinbiti danielinbiti 2016-03-30 05:40

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

    点赞 评论 复制链接分享

相关推荐