<!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. 【转】在Ubuntu 16.10 Server 上部署 Moodle

    第一步 安装 Ubuntu 16.10 Server LTS Moodle 的官方文档肯定了Ubuntu Server LTS 是适合运维Moodle平台的. 1.使用纯代码交互的服务器Ubuntu更 ...

  2. Moodle 3.4中添加小组、大组、群

    Moodle在高中应用时经常要用到年级.班级和小组,我们可以用群.大组.小组来代替. 小组设置:网站首页-->现有课程-->右上角的设置按钮-->更多-->用户-->小组 ...

  3. js字符串操作函数

    js字符串函数 JS自带函数 concat 将两个或多个字符的文本组合起来,返回一个新的字符串. var a = "hello"; var b = ",world&quo ...

  4. 9.Mongodb与python交互

    1.与python交互 点击查看官方文档 安装python包 进入虚拟环境 sudo pip install pymongo 或源码安装 python setup.py 引入包pymongo impo ...

  5. How to add a webpart to your website

          I have download a webpart that can play media on the website from the internet.Then how to add ...

  6. 『AngularJS』理解$Scope

    理解$Scope 执行概要 在AngularJS,一个子scope通常原型继承于它的父scope.应用于这个规则的表达式是一个使用scope:{...}的指令,这将创建一个『孤岛』scope(非原型继 ...

  7. OpenCV入门：（二：加载，显示，修改以及保存图片）

    目标: 1.从图片文件打开图片(imread) 2.显示图片(namedWindow和imshow) 3.转换当前图片为灰色图片(cvtColor) 4.保存图片(imwrite) 代码: #incl ...

  8. SPOJ 694

    题面 题意: 给一个字符串,求它有多少个不同的子串 多组数据. Solution : 模板题,用所有的减去重复的即可. #include <cstdio> #include <alg ...

  9. php中数据类型的强制转换

    1.在PHP开发种在很多的地方要涉及到数据类型的转换,尤其是涉及到金额的数据类型,一定要转换成float类型,否则在入库的时候可能会因为数据类型的不同覆盖掉之前的金额.(字符串和float类型相加) ...

  10. URAL 1936 Roshambo（求期望）

    Description Bootstrap: Wondering how it's played? Will: It's a game of deception. But your bet inclu ...