竖排分类导航的css写法

15.05.11 / 实践 / Author: cutecool
Tags: CSS

我所谓的分类导航是例如vancl的这类东西

但我又看到有网店用了这样子竖排的

很美貌的样子

但淘宝店一般都是table+图片大法堆起来的，而我只会手写代码对table套tdtr的就从来没弄清楚过，能躲就躲

所以希望用<ul><li>这种常规列表做这个导航

html的部分是这样的，看似很长，但主题思想就是有点儿不太规范的<li>里面再套<ul>

<div class=”category”>
<ul>
<li>
<h4><a href=”category-137-b0.html”>济南装修设计施工</a></h4>
<ul>
<li><a href=”category-138-b0.html”>按风格分类</a></li>
<li><a href=”category-149-b0.html”>现代简约</a></li>
<li><a href=”category-150-b0.html”>中式风格</a></li>
<li><a href=”category-151-b0.html”>田园风格</a></li>
<li><a href=”category-152-b0.html”>简欧风格</a></li>
<li><a href=”category-156-b0.html”>新中式</a></li>
<li><a href=”category-157-b0.html”>雅致主义</a></li>
<li><a href=”category-158-b0.html”>新古典主义</a></li>
<li><a href=”category-159-b0.html”>地中海风格</a></li>
<li><a href=”category-148-b0.html”>住窝装饰在建工地</a></li>
</ul>
</li>
<li>
<h4><a href=”category-139-b0.html”>按实景、效果分类</a></h4>
<ul>
<li><a href=”category-154-b0.html”>装修实景照</a></li>
<li><a href=”category-155-b0.html”>装修效果图</a></li>
</ul>
</li>
<li>
<h4><a href=”category-82-b0.html”>橱柜</a></h4>
<ul>
<li><a href=”category-83-b0.html”>橱柜</a></li>
<li><a href=”category-97-b0.html”>水槽及厨龙</a></li>
<li><a href=”category-84-b0.html”>厨房电器</a></li>
<li><a href=”category-90-b0.html”>灶具</a></li>
</ul>
</li>
<li>
<h4><a href=”category-85-b0.html”>地板</a></h4>
<ul>
<li><a href=”category-87-b0.html”>实木地板</a></li>
<li><a href=”category-86-b0.html”>实木复合地板</a></li>
<li><a href=”category-99-b0.html”>强化复合地板</a></li>
</ul>
</li>
<li>
<h4><a href=”category-100-b0.html”>瓷砖/地砖/墙砖</a></h4>
<ul>
<li><a href=”category-101-b0.html”>地砖</a></li>
<li><a href=”category-102-b0.html”>墙砖</a></li>
<li><a href=”category-103-b0.html”>马赛克</a></li>
</ul>
</li>
<li>
<h4><a href=”category-133-b0.html”>定制木工产品</a></h4>
<ul>
<li><a href=”category-134-b0.html”>整体衣柜</a></li>
<li><a href=”category-126-b0.html”>移门壁柜</a></li>
</ul>
</li>
<li>
<h4><a href=”category-124-b0.html”>家具</a></h4>
<ul>
<li><a href=”category-130-b0.html”>沙发</a></li>
<li><a href=”category-131-b0.html”>实木家具</a></li>
<li><a href=”category-127-b0.html”>板式家具</a></li>
</ul>
</li>

</ul>
</div>

而css的部分调的时候觉得很麻烦，最后的结果倒是非常简单。题外话，这也是我对css始终保持热情的原因，很像做几何题，过程艰辛答案简洁且有成就感。

其他部分都不重要，关键是外面的那层<li>

.category ul li {

float: left;

width: 170px;

min-height: 100px;

}

 

一行行分解配图注释好了，这也是我碰到并依次解决问题的步骤（增四有耐心的好老师~）

 

1.        float: left;      —————–>既然要排排站肯定是要左飘浮了