固定width但是有间隔
<!DOCTYPE >
<html>
<head>
<title></title>
<meta name="name" content="content">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
ul,li{
list-style: none;
width: 400px;
}
.clearfix {
zoom: 1;
} .clearfix:after {
content: "";
clear: both;
display: block;
}
li{
padding: 0;
position: relative;
border:1px black solid;
}
li p{
margin: 0;
padding: 0;
display: inline-block;
width: 16.667%;
text-align: center;
border:1px red solid;
box-sizing:border-box;
}
</style>
</head>
<body>
<ul>
<li class="clearfix">
<p>第</p>
<p>第二</p>
<p>第三栏</p>
<p>第四栏哈</p>
<p>第四栏哈哈</p>
<p>第四栏哈哈哈</p>
</li>
</ul>
</body>
</html>
解决方案1：给此元素的父标签设置font-size：0；给当前元素设置font-size：16；
li{
font-size: 0;
}
li p{
font-size: 14px;
}
解决方案2：p元素排版无间隔
<ul>
<li class="clearfix">
<p>第</p><p>第二</p><p>第三栏</p><p>第四栏哈</p><p>第四栏哈哈</p><p>第四栏哈哈哈</p>
</li>
</ul>
固定width但是有间隔的更多相关文章
- css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style
css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...
- jQueryEasyUI中DataGrid的height,width,fit,fitColumns属性
height: 600, //不指定则默认垂直包裹,指定了则固定 width:1200,//不指定则水平100%平铺,指定了则固定 fit:false,//true:高度填充父窗体,忽略height属 ...
- 简化版的Flappy Bird开发过程(不使用第三方框架)
目录 .1构造世界 .2在世界中添加元素 .3碰撞检测 .4添加动画特效 .5总结 .0 开始之前 之前曾经用Html5/JavaScript/CSS实现过2048,用Cocos2d-html5/Ch ...
- CSS基础知识---浮动，定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
- [论文理解] Connectionist Text Proposal Network
Connectionist Text Proposal Network 简介 CTPN是通过VGG16后在特征图上采用3*3窗口进行滑窗,采用与RPN类似的anchor机制,固定width而只预测an ...
- css+js实现自动伸缩导航栏
用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...
- 我的面板我做主 -- 淘宝UWP中自定义Panel的实现
在Windows10 UWP开发平台上内置的XMAL布局面板包括RelativePanel.StackPanel.Grid.VariableSizedWrapGrid 和 Canvas.在开发淘宝UW ...
- 关于MOOC的学习总结
20125133 马国祥 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 对 ...
- [转][译]关于CSS中的float和position和z-index
原文:http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...
随机推荐
- 3106: [cqoi2013]棋盘游戏
3106: [cqoi2013]棋盘游戏 链接 分析: 极大极小搜索 + 记忆化. 代码 #include<bits/stdc++.h> using namespace std; type ...
- ReentrantLock类的hasQueuedPredecessors方法和head节点的含义
部分启发来源自文章:Java并发编程--Lock PART 1 1.如果h==t成立,h和t均为null或是同一个具体的节点,无后继节点,返回false.2.如果h!=t成立,head.next是否为 ...
- Python的re模块的常用方法
一.re的match与search方法 1.re.match方法 re.match 尝试从字符串的起始位置匹配一个模式,匹配成功re.match方法返回一个匹配的对象,如果不是起始位置匹配成功的话,m ...
- java Vector向量
9.3.4 Vector向量 [专业IT培训机构,真正零首付入学www.bjsxt.com] Vector底层是用数组实现的List,相关的方法都加了同步检查,因此“线程安全,效率低”. 比如,ind ...
- 第三十三篇 Python中关于OOP（面向对象）的常用术语
面向对象的优点 从编程进化论可知,面向对象是一种更高等级的结构化编程方式,它的好处主要有两点: 1. 通过封装明确了内外,你做为类的缔造者,你就是女娲,女娲造物的逻辑别人无需知道,女娲想让你知道,你才 ...
- LeetCode - 70. Climbing Stairs(0ms)
You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...
- VC中结构体的内存布局
看了 VC++中内存对齐 这篇文章,感觉说复杂了,根据我的总结,要算出结构体的内存大小和偏移量,只要清楚结构体各成员的内存布局就行了,下面介绍一下我总结的规则,有不对之处,欢迎回复. 1.实际PACK ...
- 爬虫：Scrapy17 - Common Practices
在脚本中运行 Scrapy 除了常用的 scrapy crawl 来启动 Scrapy,也可以使用 API 在脚本中启动 Scrapy. 需要注意的是,Scrapy 是在 Twisted 异步网络库上 ...
- w命令集合
startx:在命令行模式下输入会进入图形界面 exit:注销Linux(以login shell登录会注销账号,以non-login shell登录会退出终端) data:显示日期和时间 data ...
- NO8——排序
//sort #include<algorithm> bool cmp(const int a,const int b) { return a>b;//降序排列 } //qsort ...