<!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但是有间隔的更多相关文章

  1. css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style

    css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...

  2. jQueryEasyUI中DataGrid的height,width,fit,fitColumns属性

    height: 600, //不指定则默认垂直包裹,指定了则固定 width:1200,//不指定则水平100%平铺,指定了则固定 fit:false,//true:高度填充父窗体,忽略height属 ...

  3. 简化版的Flappy Bird开发过程(不使用第三方框架)

    目录 .1构造世界 .2在世界中添加元素 .3碰撞检测 .4添加动画特效 .5总结 .0 开始之前 之前曾经用Html5/JavaScript/CSS实现过2048,用Cocos2d-html5/Ch ...

  4. CSS基础知识---浮动，定位和盒模型

    转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...

  5. [论文理解] Connectionist Text Proposal Network

    Connectionist Text Proposal Network 简介 CTPN是通过VGG16后在特征图上采用3*3窗口进行滑窗,采用与RPN类似的anchor机制,固定width而只预测an ...

  6. css+js实现自动伸缩导航栏

    用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...

  7. 我的面板我做主 -- 淘宝UWP中自定义Panel的实现

    在Windows10 UWP开发平台上内置的XMAL布局面板包括RelativePanel.StackPanel.Grid.VariableSizedWrapGrid 和 Canvas.在开发淘宝UW ...

  8. 关于MOOC的学习总结

    20125133 马国祥 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 对 ...

  9. [转][译]关于CSS中的float和position和z-index

    原文:http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...

随机推荐

  1. 利用nodejs实现商品管理系统（二）

    下面实现商品管理系统 第一步:对应的ejs与数据交换的编写格式. 商品列表界面product.ejs <% for(var i=0;i<list.length;i++){%> < ...

  2. 如何打war包

    1. 利用jdk里的工具 例如我们要打包的文件在D:\myHome\dist: 运行 cmd: cd D:\myHome\dist 进入D:\myHome\dist 然后输入 D:\myHome\di ...

  3. 详解mysql体系结构和存储引擎

    概述 之前整理的一些mysql方面内容,适合做备忘,因为我基本不会去记这些概念性的东西,大家做个了解就可以了. 一.定义数据库和实例 1.数据库: 物理操作系统文件或其他形式文件类型的集合. 在MyS ...

  4. ip4addr_ntoa和不可重入函数

    在网络中,有一个转换IP地址到ASIIC字符串的函数,该函数的返回值所指向的ASIIC字符串驻留在静态内存中,所以该函数不可重入. 通俗的讲,在多任务系统中,一个任务执行在调用运行这个函数的时候,其他 ...

  5. pprof 查看goroutine

    package main import ( "net/http" "runtime/pprof" ) var quit chan struct{} = make ...

  6. OpenCV入门：(五：更改图片对比度和亮度)

    1. 理论 图片的转换就是将图片中的每个像素点经过一定的变换,得到新像素点,新像素点组合成一张新的图片. 改变图片对比度和亮度的变换如下: 其中α和β被称作增益参数(gain parameter)和偏 ...

  7. python 自动化-"Elements not visible"

    一,今天试着跑一个多乘客下单的python脚本, 总是遇到  Elements not visible 或者  not clickable的错误 解决方法: 1. 首先观察脚本运行时, 报错的那个元素 ...

  8. Xshell6连接虚拟机(一)

    普通用户转换成管理员: 一.首先进入终端: 1.输入:    su   然后回车 2.若输入密码 则显示认证失败,说明还是普通管理员身份. (1)设置新密码:        sudo passwd r ...

  9. hdu 1556 Color the ball (区间更新 求某点值)

    Problem Description N个气球排成一排,从左到右依次编号为1,2,3....N.每次给定2个整数a b(a <= b),lele便为骑上他的“小飞鸽"牌电动车从气球a ...

  10. 对TPR(真正例率) 与 FPR(反正例率)的理解

    将测试样本进行排序,“最可能”是正例的排在最前面,“最不可能”是正例的排在最后面. 分类过程就相当于在这个排序中以某个“截断点”(见图中阈值)将样本分为两部分,前一部分判作正例,后一部分判作反例. 我 ...