固定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 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...
随机推荐
- 15 GIL 全局解释器锁 C语言解决 top ps
1.GIL 全局解释器锁:保证同一时刻只有一个线程在运行. 什么是全局解释器锁GIL(Global Interpreter Lock) Python代码的执行由Python 虚拟机(也叫解释器主循环, ...
- leetcode笔记--3 Niim game
question: You are playing the following Nim Game with your friend: There is a heap of stones on the ...
- python内置模块[sys,os,os.path,stat]
python内置模块[sys,os,os.path,stat] 内置模块是python自带功能,在使用内置模块时,需要遵循 先导入在 使用 一.sys 对象 描述 sys.argv 命令行参数获取,返 ...
- Selenium 启动无头浏览器，只有chrome 和 firefox的，没有IE
使用无头浏览器,可以避免掉不确定的弹出框对脚本稳定性的影响,还能在脚本执行过程中省略掉了css 加载的时间. 以下是Selenium 启动无头浏览器的方法,只有chrome 和 firefox的. p ...
- CentOs 版本名字说明
What images are in this directory CentOS-6.3-x86_64-netinstall.iso This is the network install and r ...
- C变量之间的转换
int main(){ //定义了三个变量分别是abc ab的值分别是5跟8 c没有赋值 把b的值给c 把a的值给b 把c的值给a 形成了一个ab值得转换: int a=5; int b=8; in ...
- 腾讯云，搭建 FTP 文件服务
腾讯云,搭建 FTP 文件服务 腾讯云,搭建 FTP 文件服务 安装并启动 FTP 服务 任务时间:5min ~ 10min 安装 VSFTPD 使用 yum 安装 vsftpd: yum insta ...
- 团队项目-第五次Scrum 会议
时间:10.31 时长:30分钟 地点:教室(主南201) 工作情况 团队成员 已完成任务 待完成任务 解小锐 修复在接受任务时,前端和后端对接中的bug 完成员工信息的简单初始化 陈鑫 完成hire ...
- Android之ViewPager 第二课
在这里只粘贴部分代码 在第一课中,只有View滑动完毕,才触发动画效果,令滑块移动,在第二课中,将实现滑块与View同步运行. SecondActivity.java package com.andr ...
- oracle server端字符集修改
1.oracle server端字符集查询 复制代码代码如下: select userenv('language') from dual; server字符集修改: 将数据库启动到RESTRICTED ...