<!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. spoj1026 favorite dice

    #include <bits/stdc++.h> using namespace std; int n,t; ; double dp[N]; /* 甩一个n面的骰子,问每一面都被甩到的需要 ...

  2. 介绍PHP的自动加载

    昨天面试被问到了 PHP 的自动加载机制,因为很多概念模糊啦,没回答好,今天特意来总结一下. include 和 require 是PHP中引入文件的两个基本方法,但是每个脚本的开头,都需要包含(in ...

  3. 4-oracle11g安装

    1.导入安装包,解压 [root@ocp Desktop]# unzip p10404530_112030_Linux-x86-64_1of7.zip [root@ocp Desktop]# unzi ...

  4. 2 socket UDP通信

    1 socket套接字  class 对象 In [1]: import socket In [2]: help(socket.socket) class socket(_socket.socket) ...

  5. Windows扩展屏开发总结

    本文来自网易云社区 作者:梁敏 一.多屏设置 在设置-系统-可以点击显示器1和2,可以进行单独设置: "使之成为我的主显示器"可以设置当前显示器是主屏:主屏的选择会决定整个虚拟屏幕 ...

  6. 『AngularJS』ngValue

    原文 描述 绑定给定的表达式到input[select]或input[radio]的值,以便当这个元素被选中的时候,设置这个元素的ngModel到绑定的值.当需要使用ng-repeat来动态生成rad ...

  7. 『AngularJS』Service

    理解Angular 服务 什么是Angular Service Angular 服务是为web应用执行特定任务的单例对象或方法. 注:如果组件是为了内容呈现的功能复用,那么服务就是为组件进行功能复用. ...

  8. ThinkPHP5项目目录规划实践

    ThinkPHP5安装后(或者下载后的压缩文件解压后)可以看到下面的目录结构: tp5├─application     应用目录 ├─extend          扩展类库目录(可定义) ├─pu ...

  9. [leetcode-655-Print Binary Tree]

    Print a binary tree in an m*n 2D string array following these rules: The row number m should be equa ...

  10. 安装CentOS 5.x与多重引导小技巧

    不建议使用Virtualbox安装Linux来学习!本处是学习在计算机上安装Linux. 但现在条件有限,就先使用Virtualbox练习!