div+ul+li+（ul+li）布局

最新推荐文章于 2024-05-14 09:58:41 发布

ningyb

最新推荐文章于 2024-05-14 09:58:41 发布

阅读量5.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： div float class 浏览器 css

本文链接：https://blog.youkuaiyun.com/ningyb/article/details/7019395

CSS 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了使用div+ul+li布局时，在li内部嵌套ul遇到的浏览器兼容性问题。通过在内层ul设置宽度，解决了在IE8、Firefox和Chrome上的显示问题。作者作为CSS初学者，欢迎高手指教。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇是 div+ul +li

这次我尝试了在li里面嵌套 ul ，代码如下：

<div class="jcpl_2">
	  <ul class="ul2">
        <li style="display:block;"><font>ningyb</font>————<font>ningyb</font></li>
      </ul>
      <ul class="ul3" style="float:left;display:block; width:340px;">
          <ul style="float:left; display:block;width:155px;">
            <li><img src="images/middle_015.jpg" /></li>
            <li>ningyb</li>
          </ul>
          <ul style="float:right; display:block; width:180px;margin:0 2px 0 2px;">
            <li>ningyb</li>
            <li>ningyb</li>
            <li>ningyb</li>
            <li style="padding:0 2px 0 2px;">ningyb</li>
          </ul>
          <div class="clear"></div>
      </ul>
      <ul style="float:right; width:340px; display:block;">
          <ul style="float:left;  display:block; width:155px;">
            <li><img src="images/middle_015.jpg" /></li>
            <li>ningyb</li>
          </ul>
          <ul style="float:right; display:block; width:180px;">
            <li>ningyb</li>
            <li>ningyb</li>
            <li>ningyb</li>
            <li  style="padding:0 2px 0 2px;">ningyb</li>
          </ul>
          <div class="clear"></div>
      </ul>
	  
      <div class="clear"></div>
    </div>

开始写完后，发现在ie8，ff，谷歌浏览器，不兼容；后来，试着给内层ul加宽度，就可以了，哈哈！感觉不错！

初学CSS，有什么不足之处，望高手指点！

——————————————————————————————————————————————————————————————————————————

以前开始接触html+css时，做的东西暴露出很多问题：

1.代码无语义化

2.清除浮动方式不佳

2.行内的css欠妥