实现上面的手机页面，我们会遇到一个自适应的问题，但是手机页面的屏幕大小不一致，自适应的问题不是百分比可以好好解决的，我采用下面的布局：display:flex;

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>list</title>

 </head>

 <style>

     .contBorder{

         margin-left:15px;

         border-left: 3px solid #666;

     }

     .listCon{

     }

     .listCon>li{

         position: relative;

         display: flex;

         margin-top: 10px;

     }

     .listCon>li:before{

         content:'';

         position: absolute;

         width: 20px;

         height:20px;

         border-radius: 10px;

         background-color:#efef;

         left:-52px;

         top:15px;

     }

     .clear{clear:both;}

     .listSeft{

         background-color:#da4453;

         color:#fff;

         flex:1;

     }

 </style>

 <body>

     <div class="contBorder">

         <ul class="listCon">

             <li>

                 <div class="listSeft">

                     <p>20-78-90-76</p>

                 </div>

             </li>

             <li>

                 <div class="listSeft">

                     <p>20-78-90-76</p>

                 </div>

             </li>

             <li>

                 <div class="listSeft">

                     <p>20-78-90-76</p>

                 </div>

             </li>

             <li>

                 <div class="listSeft">

                     <p>20-78-90-76</p>

                 </div>

             </li>

         </ul>

     </div>

 </body>

 </html>

给li标签的属性增加：display：flex；给article标签加属性：flex：1；

就可以实现横条忽略内容宽度，保持所有横条的宽度一致。

css代码实现列表等宽的更多相关文章

  1. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  2. 页面定制CSS代码初探（一）：页面变宽 文本自动换行 图片按比缩放

    初识博客 初写博客,先在设置里选了个喜欢的模板 第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱 ...

  3. 实用的60个CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  4. 60个有用CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  5. 30+有用的CSS代码片段

    在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人 ...

  6. 【转】30+有用的CSS代码片段

    来自:WEB资源网 链接:http://webres.wang/31-css-code-snippets-to-make-you-a-better-coder/ 原文:http://www.desig ...

  7. （转）每位设计师都应该拥有的50个CSS代码片段

    原文地址:http://www.cnblogs.com/fengyuqing/archive/2013/06/15/css_50.html 面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. ...

  8. 页面css代码

    博主原来的页面css代码 (这个是原来的那种效果,差不多弄出来会是这种效果http://www.cnblogs.com/thmyl/) /*simplememory*/ #google_ad_c1, ...

  9. 很实用的50个CSS代码片段

    原文:50 Useful CSS Snippets Every Designer Should Have          面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...

随机推荐

  1. swoole之建立 http server

    一.代码部分 <?php /** * 传统:nginx <-> php-fpm(fast-cgi process manager) <-> php * swoole:ht ...

  2. 环境变量方式使用 Secret【转】

    通过 Volume 使用 Secret,容器必须从文件读取数据,会稍显麻烦,Kubernetes 还支持通过环境变量使用 Secret. Pod 配置文件示例如下: 创建 Pod 并读取 Secret ...

  3. 微信小程序支付功能前端流程

    只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是uni app). handleCreate () { /** 第一步:前台将商品数据发送到后台,后台创建订单入库并返回订单id等信息 ...

  4. ng-trim

    最近新做了一个需求,要求在angular.js的input 文本框中做到去除首尾空格,实现精确查询. 查了很多正则表达式,后来才发现angular.js项目中默认就能去除首尾空格,ng-trim  默 ...

  5. MongoDB首次启动常见问题

    问题1. exception in initandlisten 29 data directory /data/db not found 问题:MongoDB默认存储路径为/data/db,这里显示没 ...

  6. 【转】Spark Streaming 实时计算在甜橙金融监控系统中的应用及优化

    系统架构介绍 整个实时监控系统的架构是先由 Flume 收集服务器产生的日志 Log 和前端埋点数据, 然后实时把这些信息发送到 Kafka 分布式发布订阅消息系统,接着由 Spark Streami ...

  7. Vuex源码分析(转)

    当我们用vue在开发的过程中,经常会遇到以下问题 多个vue组件共享状态 Vue组件间的通讯 在项目不复杂的时候,我们会利用全局事件bus的方式解决,但随着复杂度的提升,用这种方式将会使得代码难以维护 ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-home

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. Python基础week1

    本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...

  10. 软件管理-RPM命令管理：安装升级与卸载

    1.包名与包全名 包名 : 操作已经安装的软件包时,使用包名:系统会搜索var/lib/rpm中的数据库 包全名: 操作的包时没有安装的软件包时,使用包全名,而且注意路径 2.RPM安装 切换到光盘p ...