<!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. 对C语言连等式的学习

    例子如下 [pgsql@localhost soft]$ cat test1.c #include <stdlib.h> #include <stdio.h> int main ...

  2. struts2官方 中文教程 系列十一：使用XML进行表单验证

    在本教程中,我们将讨论如何使用Struts 2的XML验证方法来验证表单字段中用户的输入.在前面的教程中,我们讨论了在Action类中使用validate方法验证用户的输入.使用单独的XML验证文件让 ...

  3. easyui combox 随便不存在的值，清空

    onHidePanel: function () { var valueField = $(this).combobox("options").valueField; var va ...

  4. IAR工程名修改

    修改.dep..ewd..ewp..eww四个文件的文件名 删除.ewt文件(如果存在) 记事本打开.eww文件,修改<path></path>间的.ewp文件名 打开工程,打 ...

  5. 区分Oracle的数据库，实例，服务名，SID

    文章摘自:http://www.zhetao.com/content240 感谢分享O(∩_∩)O~ 在实际的开发应用中,关于Oracle数据库,经常听见有人说建立一个数据库,建立一个Instance ...

  6. Java与C++进行系统间交互：Protocol Buffer

    在一次项目中,因笔者负责的java端应用需要与公司C++系统进行交互,公司选定Protocol Buffer方案,故简单的了解一下 有需要的可以看一下其他作者的文章,了解一下Protobuf: htt ...

  7. 「日常训练」 Soldier and Number Game (CFR304D2D)

    题意 (Codeforces 546D) 给定一个数x=a!b!" role="presentation">x=a!b!x=a!b!的形式,问其中有几个质因数. 分 ...

  8. PHP的array_merge()合并数组

    ,4];print_r(array_merge($arr1,$arr2));返回结果:Array(    [a] => 3    [b] => 2    [0] => 4)1注释:当 ...

  9. 实用的placeholder插件，兼容IE下的placeholder，jquery插件

    placeholder在IE下无法兼容 ,下面的插件很好的处理了这个问题,拿去不谢 /* * jQuery placeholder, fix for IE6,7,8,9 * @website itmy ...

  10. 输出1-n的全排(递归C++)

    [问题描述] 输出1到n之间所有不重复的排列,即1到n的全排,要求所产生的任一数列不含有重复的数字. [代码展示] #include<iostream>using namespace st ...