Question

div css网页设计中li横向排列遇到的奇怪问题

想实现图1的效果，下面的子项用li的横向浮动方式实现（可自动换行）；可不论怎样设置，第二个大类的名称总会跟第一个大类的最后一li后面去。html部分： <ul> <li>水果 <ul> <li>苹果</li> <li>香蕉</li> <li>䔧子</li> <li>葡萄</li> <li>火龙果</li> </ul> </li> <li>蔬菜 <ul> <li>黄瓜</li> <li>carduflower</li> <li>辣椒</li> <li>茄子</li> <li>花菜</li> </ul> </li> </ul>css部分： ul li{color:blue;font-weight:bold;} ul{list-style:none; padding:0; margin:0} ul li ul{margin:1em;} ul li ul li{float:left;margin-right:1em;cursor:pointer;} ul li ul li:hover{color:red;}





Answer 1

代码我理过了，写的太想当然了，导致繁杂。

你的问题解决方法也很简单，要求换行就直接给换行命令就好了：

（ps：要突出种类并换行，直接用换行指令就行了，li里面再套一个ul完全就是自找麻烦，最简单分两<p>+<ul>组合都比这样写来的实在。）

Answer 2

这个标签用法就错了，要不用dl，要不分开，标题+内容

Answer 3

用div分层应该也可以

Answer 4

用dl来写就不会这样了