zoukankan      html  css  js  c++  java
  • 解决css中display:inline-block产生的空隙问题

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            li{
                list-style: none;
                width: 100px;
                height:20px;
                border:1px solid #ff0000;
                display: inline-block;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <ul id="ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    <body>
    </head>

    这样的代码会产生如下图所示的间隙问题

    解决方法有很多,可以通过调整margin为负值来解决,也可以通过其他的方法,但是我最喜欢的是这种方法

    <ul id="ul">
            <li>1</li
            ><li>2</li
            ><li>3</li
            ><li>4</li>
        </ul>

    闭合标签放在下行的开头,或者是通过注释来解决

    <ul id="ul">
            <li>1</li><!--
            --><li>2</li><!--
            --><li>3</li><!--
            --><li>4</li>
        </ul>

    亲测在浏览器下支持良好,ie6/7/8都OK的,但是有同学会说:display在ie6/7无效。那么请看我的上一篇决解display:inline-block的兼容问题

  • 相关阅读:
    如何在三维坐标中选择点
    java slider
    java combobox 多选框
    java BorderFrame.java
    java radioButton
    java checkbox
    java 文本窗口
    constexpr
    测试框架
    java 计算器
  • 原文地址:https://www.cnblogs.com/vivenZ/p/6411724.html
Copyright © 2011-2022 走看看