以下代码兼容IE6及以上、火狐、OPERA等目前主流浏览器。
本实例，我用了一个hack来使IE6兼容，请看以下实例代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 10 Transitional//EN” “>第一种：<div style="border:5px solid #f00;float:left;min-width:220px;_width:220px;padding:12px;white-space:nowrap">最小宽度</div>
第二种：<div style="border:5px solid #f00;position:absolute;min-width:220px;_width:220px;padding:12px;white-space:nowrap">最小宽度</div>
2种方法，你看着用推荐的做法是不用ul和li来做页码，而是直接用a标签来做
<div>
<a href="#">1</a> <a href="#">2</a> <a href="#">3</a>
＜/div>
然后设置div text-align:center，再定义一下超链接的边距什么的就可以了。因为ul宽度不定的水平居中太复杂了，很难实现，与其纠结这样的问题，还不如把它简单化处理。当父元素和子元素都没有定义宽度的情况下实现水平居中：
display:inline-block
可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。
<div class="navbar">
<ul>
<li><a href="/">Home</a></li>
…
</ul>
</div>
navbar {
text-align:center;
}
navbar ul {
display:inline-block;
}
navbar li {
float:left;
}
navbar li + li {
margin-left:20px;
}
IE系列IE8+支持，要IE7 IE6 支持需要加入以下代码使display:inline像display:inline-block一样
navbar ul {
display:inline;
zoom:1;
}
position:relative
使用position:relative与float相结合的技巧及其浮动和定位参照物的关系，这个技巧需要两个父元素，一个用来定位而另外一个用来避免出现滚动条。
<div class="navbar">
<div>
<ul>
<li><a href="/">Home</a></li>
…
</ul>
</div>
</div>
navbar {
overflow:hidden;
}
navbar > div {
position:relative;
left:50%;
float:left;
}
navbar ul {
position:relative;
left:-50%;
float:left;
}
navbar li {
float:left;
}
navbar li + li {
margin-left:20px;
}
IE7下需要加入下列代码支持：
navbar {
position:relative;
}
display:table
如果向使用极少的标签实现，这个方法是个不错的选择。padding-right没效果是因为是设定的是float:left;你改成float:right;就行了
或者你把padding-right改为padding-left;
不知道是不是解决了你的问题
不过我隐约觉得问题还有其他意思，是不是你想li撑满ul的宽度？
我给你改一下好了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">image_box{ list-style:none; width:100%; margin:0px auto; }
image_box li { width: 24% ; height:200px; background-color:#ccc; float:left; margin-left:2px }
24% 可以随便调啦, 放几个就100/几 再减几个像素就可以您好，这样：
加个属性：white-space:nowrap;
在CSS文件里这么定义
a{white-space:nowrap; }
这样所有<a>包括的内容都不会换行。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）