css代码实现列表等宽
实现上面的手机页面,我们会遇到一个自适应的问题,但是手机页面的屏幕大小不一致,自适应的问题不是百分比可以好好解决的,我采用下面的布局: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代码实现列表等宽的更多相关文章
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
- 页面定制CSS代码初探(一):页面变宽 文本自动换行 图片按比缩放
初识博客 初写博客,先在设置里选了个喜欢的模板 第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱 ...
- 实用的60个CSS代码片段
1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...
- 60个有用CSS代码片段
1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...
- 30+有用的CSS代码片段
在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人 ...
- 【转】30+有用的CSS代码片段
来自:WEB资源网 链接:http://webres.wang/31-css-code-snippets-to-make-you-a-better-coder/ 原文:http://www.desig ...
- (转)每位设计师都应该拥有的50个CSS代码片段
原文地址:http://www.cnblogs.com/fengyuqing/archive/2013/06/15/css_50.html 面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. ...
- 页面css代码
博主原来的页面css代码 (这个是原来的那种效果,差不多弄出来会是这种效果http://www.cnblogs.com/thmyl/) /*simplememory*/ #google_ad_c1, ...
- 很实用的50个CSS代码片段
原文:50 Useful CSS Snippets Every Designer Should Have 面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...
随机推荐
- CodeForces - 869A The Artful Expedient
题意:有两个序列X和Y,各含n个数,这2n个数互不相同,若满足xi^yj的结果在序列X内或序列Y内的(xi,yj)对数为偶数,则输出"Karen",否则输出"Koyomi ...
- JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...
- Ubuntu指令
cd ~ 进入桌面 cd /进入计算机 mkdir 创建文件夹 mv移动文件 mv 源文件 目标文件 记得前面加/.
- Day7 - E - Strange Way to Express Integers POJ - 2891
Elina is reading a book written by Rujia Liu, which introduces a strange way to express non-negative ...
- 011.Oracle数据库分页,取前10条数据
SELECT ATA FROM LM_FAULT WHERE ( OCCUR_DATE BETWEEN to_date( '2017-05-01', 'yyyy-MM-DD' ) AND to_dat ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-off
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- ACM-寻宝
题目描述:寻宝 有这么一块神奇的矩形土地,为什么神奇呢?因为上面藏有很多的宝藏.该土地由N*M个小正方形土地格子组成,每个小正方形土地格子上,如果标有“E”,则表示该格可以通过:如果标有“X”,则表示 ...
- Arch系linux配置Go开发环境
1. 下载go $ sudo pacman -S go 下载后系统会将go安装在/usr/lib/go目录下 2. 配置一些环境变量 一共需要三个环境变量,分别为: GOROOT -> go语言 ...
- CF97B Superset超级集合
CF97B Superset 这题主要是构造难想.看看数据范围发现连\(O(n^2)\)都被卡了,然后 考试的名称提醒我 想到了分治. 坐标按横坐标为关键字排序后找中间的点进行分治不是点分治qwq. ...
- POJ 3614:Sunscreen 贪心+优先队列
Sunscreen Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5378 Accepted: 1864 Descrip ...