固定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 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...
随机推荐
- 【Leetcode】647. Palindromic Substrings
Description Given a string, your task is to count how many palindromic substrings in this string. Th ...
- shell -- 大括号和小括号
在这里我想说的是几种shell里的小括号,大括号结构和有括号的变量,命令的用法,如下: 1.${var} 2.$(cmd) 3.()和{} 4.${var:-string},${var:+string ...
- 在编程的时候，NotePad++ 中闪烁的光标突然有竖着闪烁的编程蓝色下划线闪烁的--小技巧告诉你-费元星
当在写代码时出现的光标闪烁(横线闪烁) 在键盘上找 Insert ,按这个Insert就可以把横向闪烁光标( _ )修改成竖向闪烁光标样式( | ),横向光标会在你写代码的时候修改前面的代码,把光标移 ...
- laravel5.5jwt-auth的使用
laravel5.5 + jwt-auth:dev-develop 安装扩展 composer require tymon/jwt-auth:dev-develop --prefer-source 添 ...
- 记一次艰难的CTP调试
一个atmel,mxt540e的CTP触摸屏. 中断配置为下降沿,输入上拉. 总是只能触发一次中断,中断脚就一直低电平,无法拉高.这只是表面现象 不停找底层I2C驱动,改代码,没用.要靠波形来说话 ...
- Java日志（二）：log4j与XML配置文件
[Java日志(一):log4j与.properties配置文件]一文列举的几个案例以.properties文件作为log4j的配置文件,本文简单看一下log4j与XML配置文件 (1)XML配置文件 ...
- jenkins使用Role Strategy管理用户权限
下载插件地址:https://wiki.jenkins.io/display/JENKINS/Role+Strategy+Plugin 1. 安装好插件后,进入jenkins系统管理的Configur ...
- 虚拟现实-VR-UE4-构建光照显示光照构建失败，Swarm启动失败
闲的无聊折腾,发现想构建光照的时候,总是显示失败 如下图 百度许久,有大神指出是我在编译源码的的时候没有将其中的某个模块编译进去,只需要重新编译摸个模块就好 在UE4 的sln文件下,会看到一个Unr ...
- MySQL☞Group By
分组: group by 列名:根据某一列,把数据分成几组,经常对每一组的数据使用聚合函数,按照我的理解,该列有几种不同的值,那么就把该列分成几组,如下图 简单的来说,第二列中有两个不同的值a和b,那 ...
- python基础篇 05字典
本节主要内容:1. 字典的简单介绍2. 字典增删改查和其他操作3. 字典的嵌套 一. 字典的简单介绍:字典(dict)是python中唯一的一个映射类型.他是以{ }括起来的键值对组成. 在dict中 ...