<!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. R语言学习笔记（五）：零碎知识点(11-15)

    11--which.min(), which.max()和which() which(x, arr.ind = FALSE, useNames = TRUE) x 是一个向量或者数组,可以是NA,但会 ...

  2. [Codeforces888E]Maximum Subsequence(暴力+meet-in-the-middle)

    题意:给定n.m.有n个数,选出若干数加起来对m取模,求最大值 n<=35 如果直接暴力就是235,会T, 这里用到一个思想叫meet-in-the-middle, 就是把数列分成两半分别搜索, ...

  3. EAS集锦

    前言 之前看过的相关BOS开发文档,整理了一些常用的API,一直没有来得及放上来,现在把整理的文件放上来,以备忘查看,分享.闲话少说,上干货! ps 图片不方便查看的话,可以拖住图片,加载到浏览器新页 ...

  4. P1215 [USACO1.4]母亲的牛奶 Mother's Milk

    P1215 [USACO1.4]母亲的牛奶 Mother's Milk 题目描述 农民约翰有三个容量分别是A,B,C升的桶,A,B,C分别是三个从1到20的整数, 最初,A和B桶都是空的,而C桶是装满 ...

  5. Python3: 对两个字符串进行匹配

    Python里一共有三种字符串匹配方式,用于判断一个字符串是否包含另一个字符串.比如判断字符串“HelloWorld”中是否包含“World”: def stringCompare(str1, str ...

  6. 形象的理解Strong和Weak

    Strong Weak

  7. 【jQuery】 选择器

    [jQuery] 选择器 资料: w3school  http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 1. 标签选择器 : $(& ...

  8. 「赛后补题」HBCPC2018题目代码与思路简析

    这次比赛(2018年第二届河北省大学生程序设计竞赛)虽然没有打,但是题目还是要写的.未完成的题目(还差比较硬核的四题)和思路分析会陆续更新完. Problem A 2011 Mex Query /* ...

  9. Python-学习-项目1-即时标记-1

    买了一本Python入门,奈何看不下去,只能是先看后面的项目,看到那里不懂的时候在回去学习. 项目名字:即时标记 大致的意思就是把一个纯文本文件标记成自己想要的格式文件. 首先就是待处理文本,我找不到 ...

  10. m个苹果放在n个盘子中有多少种结果

    题目 m个苹果放在n个盘子中有多少种结果,前置条件: 允许存在空盘 重复的摆放结果忽略不计 根据题意,也就是有3种情况,的确完全重复的摆放方式是没多大意义的 思路 这题可以用枚举的描述方式进行尾递归求 ...