好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

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

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

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


回复讨论(解决方案)

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

American Axle Germanic Axle Suspension Bogie Brake Drum Axle Brake Disc Brake Shoe Wheel Hub King Pin Series Fifth Wheel Series

查看更多关于纯CSS如何实现子元素自适应宽度并居中_html/css_WEB-ITnose的详细内容...

  阅读:31次