固定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 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...
随机推荐
- R语言绘图：直方图
使用ggplot2包绘制直方图 ######*****绘制直方图代码*****####### data1 <- data0[(data0[, 2] <= 500) & (data0 ...
- atlas+mysql主主集群实现读写分离
atlas+mysql主主集群实现读写分离 前言: 目前线上系统数据库采用的是主主架构.其中一台主仅在故障时切换使用,(仅单台服务器对外提供服务,当一台出现问题,切换至另一台).该结构很难支撑较大并 ...
- MVC中输入的保护验证用：HttpServerUtility.HtmlEncode
安全说明: 上面的代码使用HttpServerUtility.HtmlEncode来保护应用程序的恶意输入 (即 JavaScript).详细信息请参阅如何: 在 Web 应用程序,通过应用 HTML ...
- [Jmeter]jmeter数据库性能测试配置
学习jmeter过程中,记录一些学习过程中的点点滴滴,用于备忘.本文主要介绍的是如何创建一个简单的测试计划用户测试数据库服务器. 一.添加线程组 二.添加JDBC请求 1.在第一步里面定义并发用户以及 ...
- JAVA中堆栈和内存分配详解(摘抄)
在Java中,有六个不同的地方可以存储数据: 1.寄存器:最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制. 2. 栈:存放基本类型的变量数据和对象的引用,但对象本身不存放在栈中,而是存 ...
- centos下搭建svn服务器端/客户端
1.安装 yum install subversion httpd mod_dav_svn 2.创建仓库存储代码 mkdir /var/repos svnadmin create /var/repos ...
- 思杰VDI提示“The VDI is not available”
前言:困扰已久的问题终于解决. 问题:客户反馈无法连接VDI. 解决过程:1.登录后台查看VDI状态为关机状态尝试重新启动提示如下图: 2.判断此VDI的启动盘出现问题(注:本人环境无数据盘) 3.查 ...
- redis学习资料汇总
redis学习资料汇总 2017年01月07日 22:10:37 阅读数:281 转载:http://blog.csdn.net/wtyvhreal/article/details/50427627 ...
- node 发送 post 请求 get请求。
因为我们部门打算用node请求restful 然后慢慢替换掉服务端,以后直接请求soa的接口,让前端的数据更贴切项目,因为我们服务端接口和app公用一套,由于业务的需求和版本不统一(例如app6.4的 ...
- android中的文件（图片）上传
android中的文件(图片)上传其实没什么复杂的,主要是对 multipart/form-data 协议要有所了解. 关于 multipart/form-data 协议,在 RFC文档中有详细的描述 ...