需求发布后1小时内收到服务商响应每个需求平均有10个服务商参与95%以上的需求得到了圆满解决所有需求不向雇主收取任何佣金流量暴涨，转化飙升，销量翻倍
怎样做到网页自适应屏幕大小，不需要设计不同的页面来适应
有相似问题想解决?专业顾问来帮助您
匹配服务商
选择服务商，签单
服务商工作
验收并付款
已投标服务商
综合评分：5颗星
速度：5.00
服务：5.00
态度：5.00
好评率：100%
共有3个服务商参与报价，查看更多服务商报价
参与报价,开始赚钱
提交你的报价和方案
中标后交付作品
获得任务赏金
急速:10分钟急速响应
省心:标准化服务
放心:不满意全额退款(免单)无序列表宽度自适应特效，不管浏览器的窗口有多宽，它都会自适应宽度。
以下是程序代码&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&meta name=&keywords& content=&站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网& /&
&meta name=&description& content=&www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！& /&
&title&网页特效 纯CSS实现无序列表宽度自适应效果 站长特效网&/title&
&style type=&text/css&&
* { margin:0; padding:0; list-style:}
ul { border:1px solid #cfdae8; border-left: border-bottom: overflow: background:#999999; zoom:1;}
li { width:20%; *width:19.9%;/*IE6&IE7的宽度有点*/ float:}
span { display: border-left:1px solid #cfdae8; height:24 font-size:12 line-height:24 padding:0 4}
&a href=&http://www.zzjs.net/&&站长特效网&/a&，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。&hr&
&!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，,用.net打造靓站--&
&li&&span&&a href=&http://www.zzjs.net&&站长特效一号&/a&&/span&&/li&
&li&&span&&a href=&http://www.zzjs.net&&站长特效二号&/a&&/span&&/li&
&li&&span&&a href=&http://www.zzjs.net&&站长特效三号&/a&&/span&&/li&
&li&&span&&a href=&http://www.zzjs.net&&站长特效四号&/a&&/span&&/li&
&li&&span&&a href=&http://www.zzjs.net&&站长特效五号&/a&&/span&&/li&
&li&&span&&a href=&http://www.zzjs.net&&站长特效六号&/a&&/span&&/li&
&li&&span&&a href=&http://www.zzjs.net&&站长特效七号&/a&&/span&&/li&
&li&&span&&a href=&http://www.zzjs.net&&站长特效八号&/a&&/span&&/li&
&li&&span&&a href=&http://www.zzjs.net&&站长特效九号&/a&&/span&&/li&
&li&&span&&a href=&http://www.zzjs.net&&站长特效十号&/a&&/span&&/li&
&li&&span&&a href=&http://www.zzjs.net&&站长特效十一号&/a&&/span&&/li&
&br /&&br /&不管浏览器的窗口有多宽，它都会自适应宽度。
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
( 10:05:43)
( 09:46:00)
( 11:12:07)
( 10:51:17)
相关排行总榜css自适应宽度 多种方法实现宽度自适应的水平居中
作者：佚名
字体：[ ] 来源：互联网 时间：04-05 21:22:59
宽度自适应达到水平居中在网页制作中很常见而且很实用，本文整理搜集了一些实用的自适应宽度的水平居中技巧，感兴趣前端工程师们可以借鉴一下，或许对你有所帮助
当父元素和子元素都没有定义宽度的情况下实现水平居中： display:inline-block 可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。 HTML代码: 代码如下: &div class="navbar"& &ul& &li&&a href="/"&Home&/a&&/li& & &/ul& &/div& CSS代码: 代码如下: .navbar { text-align: } .navbar ul { display:inline- } .navbar li { float: } .navbar li + li { margin-left:20 } IE系列IE8+支持，要IE7 IE6 支持需要加入以下代码使display:inline像display:inline-block一样 代码如下: .navbar ul { *display: *zoom:1; } position:relative 使用position:relative与float相结合的技巧及其浮动和定位参照物的关系，这个技巧需要两个父元素，一个用来定位而另外一个用来避免出现滚动条。 HTML代码: 代码如下: &div class="navbar"& &div& &ul& &li&&a href="/"&Home&/a&&/li& & &/ul& &/div& &/div& CSS代码: 代码如下: .navbar { overflow: } .navbar & div { position: left:50%; float: } .navbar ul { position: left:-50%; float: } .navbar li { float: } .navbar li + li { margin-left:20 } IE7下需要加入下列代码支持： 代码如下: .navbar { position: } display:table 如果向使用极少的标签实现，这个方法是个不错的选择。 HTML代码: 代码如下: &ul class="navbar"& &li&&a href="/"&Home&/a&&/li& & &/ul& CSS代码: 代码如下: .navbar { display: margin:0 } .navbar li { display:table- } .navbar li + li { padding-left:20 } 不支持IE7及一下浏览器，其他的主流浏览器都支持。 display:inline-flex 这个方法需要使用 flex-layout 的知识。 HTML代码: 代码如下: &div class="navbar"& &ul& &li&&a href="/"&Home&/a&&/li& & &/ul& &/div& CSS代码: 代码如下: .navbar { text-align: } .navbar & ul { display:-webkit-inline- display:-moz-inline- display:-ms-inline- display:-webkit-inline- display:inline- } .navbar li + li { margin-left:20 } 使用CSS fit-content 值 下面看看如何用fit-content创建一个包含子元素浮动的未知宽度的导航。 HTML代码: 代码如下: &div class="navbar center"& &ul& &li&&a href="/"&Home&/a&&/li& &li&&a href="/"&About us&/a&&/li& &li&&a href="/"&Our products&/a&&/li& &li&&a href="/"&Customer support&/a&&/li& &li&&a href="/"&Contact&/a&&/li& &/ul& &/div& CSS代码: 代码如下: .center ul{ width: -moz-fit- width: -webkit-fit- width: fit- margin: } 浏览器支持度较低 只Chrome和Firefox这样的-webkit- -moz-内核浏览器。当然以后慢慢会发展起来的。 这个方式是推动浏览器发展的一个新的东西，目前供应于所以可以写前缀的浏览器，并没有工作在IE9和IE9以下。 根据你的需求来选择合适的方法吧，display:inline-block兼容性较好，flex-box将会用于未来。
大家感兴趣的内容
12345678910
最近更新的内容如何让子标签自适应父标签的宽度
[问题点数：40分]
如何让子标签自适应父标签的宽度
[问题点数：40分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2014年5月 Web 开发大版内专家分月排行榜第二2014年4月 Web 开发大版内专家分月排行榜第二
2014年3月 Web 开发大版内专家分月排行榜第三2014年2月 Web 开发大版内专家分月排行榜第三2013年7月 .NET技术大版内专家分月排行榜第三2013年6月 .NET技术大版内专家分月排行榜第三2012年9月 .NET技术大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。