纯CSS如何实现子元素自适应宽度并居中_html/css_WEB-ITnose

php中文网
发布: 2016-06-21 08:51:56
原创
1759人浏览过



如上图所示,红色部分div宽度是100%,蓝色的是子元素,子元素有border-bottom,且文字右边有一个双箭头。

现要求如下:
1、纯css实现,不使用js和table。
2、文字因为是用户输入的,所以每一行的文字宽度都不是固定的,但是文字只考虑一行的情况,不考虑两行,可以用white-space:nowrap;禁止换行。
3、每个子元素右边的双箭头必须是对齐的,右边双箭头与最长那行文字的距离是10px固定的,其它行双箭头与该行双箭头对齐。
4、因为这个是手机端的网页,所以可以考虑用css3、html5,只要主流的手机浏览器支持即可

不知道上面的要求,纯css有没有办法实现,具体的思路是什么,html可以随意写,只要能实现像图片中这样显示就可以。

百度文心百中
百度文心百中

百度大模型语义搜索体验中心

百度文心百中 22
查看详情 百度文心百中


回复讨论(解决方案)

另外右边双箭头与最长那行文字的距离是10px固定的,其它行双箭头与该双箭头对齐

<div class="iprocat">	<ul>		<li><a href="/index.php?catid=8">American Axle</a></li>		<li><a href="/index.php?catid=9">Germanic Axle</a></li>		<li><a href="/index.php?catid=10">Suspension</a></li>		<li><a href="/index.php?catid=11">Bogie</a></li>		<li><a href="/index.php?catid=12">Brake Drum</a></li>		<li><a href="/index.php?catid=13">Axle</a></li>		<li><a href="/index.php?catid=14">Brake Disc</a></li>		<li><a href="/index.php?catid=15">Brake Shoe</a></li>		<li><a href="/index.php?catid=16">Wheel Hub</a></li>		<li><a href="/index.php?catid=17">King Pin Series</a></li>		<li><a href="/index.php?catid=18">Fifth Wheel Series</a></li>	</ul></div>
登录后复制


*{margin:0;padding:0;outline:none;}body{font:menu;font-size:0.24rem;}a{text-decoration:none;color:#333;}a:hover{text-decoration:underline;color:#d00;}li{list-style:none;}img{border:none;vertical-align:top;}@font-face {  font-family: 'iconfont';  src: url('//at.alicdn.com/t/font_1460087185_4783318.eot'); /* IE9*/  src: url('//at.alicdn.com/t/font_1460087185_4783318.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  url('//at.alicdn.com/t/font_1460087185_4783318.woff') format('woff'), /* chrome、firefox */  url('//at.alicdn.com/t/font_1460087185_4783318.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  url('//at.alicdn.com/t/font_1460087185_4783318.svg#iconfont') format('svg'); /* iOS 4.1- */}.iprocat{background:url(../images/iprocat-bg.jpg);text-align:center;overflow:hidden;}.iprocat ul{display:inline-block;text-align:left;font-size:.24rem;line-height:.4rem;padding-bottom:.24rem;}.iprocat li{border-bottom:1px solid #ddd;position:relative;}.iprocat li:before,.iprocat li:after{content:'';border-bottom:1px solid #ddd;width:100%;position:absolute;bottom:-1px;}.iprocat li:before{right:100%;}.iprocat li:after{left:100%;}.iprocat li a{color:#666;display:block;}.iprocat li a:before{content:'\e604';font-family:'iconfont';float:right;color:#ddd;margin-left:.1rem;}
登录后复制



视觉上实现了,但是border-bottom是使用:before和:after拼合起来实现的,不知道有没有更好的办法

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号