Q:DIV里面的<ul><li>如何随屏幕变化间距
我DIV这个层的width:100%
而里面的<ul><li>是做来做横向的导航条.
如何让<ul>在DIV中居中,而且随着屏幕变宽或者变窄而<li>自行调理间距.
这样子问不知道大家明白不.
A:
你看一下 你要的是不是这样的效果
固定是80的话 你要多分几个<li>了如果有固定像素就不能自动适应了 你自己测试下
<style>
.a{margin:5px auto 0 auto;width:100%;text-align:center;border:1px solid #000;}
.a ul{margin:0;padding:0;} /*注意 一定要清空 默认是有的*/
.a li{float:left;width:24%;overflow:hidden;height:21px;line-height:21px;padding:0px 0px 0px 0px;display:inline;background:url(XXX.gif) no-repeat;}
</style>
<div class="a">
<ul>
<li>栏目一</li>
<li>栏目二</li>
<li>栏目三</li>
<li>栏目四</li>
</ul>
</div>
我DIV这个层的width:100%
而里面的<ul><li>是做来做横向的导航条.
如何让<ul>在DIV中居中,而且随着屏幕变宽或者变窄而<li>自行调理间距.
这样子问不知道大家明白不.
问题补充:那么如果要给<li>这栏目加个固定大小的背景图呢,图的宽是80px
A:
你看一下 你要的是不是这样的效果
固定是80的话 你要多分几个<li>了如果有固定像素就不能自动适应了 你自己测试下
<style>
.a{margin:5px auto 0 auto;width:100%;text-align:center;border:1px solid #000;}
.a ul{margin:0;padding:0;} /*注意 一定要清空 默认是有的*/
.a li{float:left;width:24%;overflow:hidden;height:21px;line-height:21px;padding:0px 0px 0px 0px;display:inline;background:url(XXX.gif) no-repeat;}
</style>
<div class="a">
<ul>
<li>栏目一</li>
<li>栏目二</li>
<li>栏目三</li>
<li>栏目四</li>
</ul>
</div>
浙公网安备 33010602011771号