css怎么写代码让ul列表横着显示？请教、谢谢

html-css017

css怎么写代码让ul列表横着显示？请教、谢谢,第1张

li { display: inline-block}

li { *display: inline*zoom: 1}

利用CSS的inline-blick属性，后边两个是针对低版本IE的HACK，注意这个HACK比较特殊，要像我这样独立地写出来

而且，每个li标签之间不能有空格或换行，要像这样写，否则就会造成莫名其妙的外边距，这算是inline-block里面一个不算BUG的BUG吧。。。

<ul><li>

内容

</li><li>

内容2

</li><li>

内容3

</li></ul>

另外，float会带来很多问题，所以不建议用float

横向排列需要在CSS中设定一个浮点，属性名为float 设定为Left 或者 Right

这两个有差别 如果是Left 它会往左开始 1 2 3 4 如果是 Right是 往右开始 4 3 2 1

代码可以这么写

<style>

.LinkUl { float:left}

</style>

<div >

<h3><b>友情链接</b></h3>

<ul id="ul1" class="LinkUl">

<li>这是第一列的第一个</li>

<li>这是第一列的第二个</li>

<li>这是第一列的第三个</li>

</ul>

<ul id="ul2" class="LinkUl">

<li>这是第二列的第一个</li>

<li>这是第二列的第二个</li>

<li>这是第二列的第三个</li>

</ul>

<ul id="ul3" class="LinkUl">

<li>这是第三列的第一个</li>

<li>这是第三列的第二个</li>

<li>这是第三列的第三个</li>

</ul>

</div>

也可以适用于<li>标签