首页 > 代码库 > CSS中inline-block的应用

CSS中inline-block的应用

  以往我们做横向菜单列表的时候,往往使用li和float:left结合来实现,但这样通常会造成布局的混乱。因此我们可以尝试使用li和display:inline-block来实现。

  简单的说,设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性,又保持了inline-block元素不换行的特性。

  首先,创建一个html文件,包含以下代码:

<style>
ul,li{
    padding:0;
    margin:0;
}
li{
    display:inline-block;
    border:1px solid #000;
}
</style>

<ul>
    <li>TianJin</li>
    <li>ShangHai</li>
    <li>SuZhou</li>
    <li>NanJing</li>
</ul>

    当我们在浏览器端打开此页面时,效果如下:

                    技术分享

     然而我们发现,虽然设置了margin和padding属性为0,但每个li之间有一个小空隙,接下来如果把代码中的li标签写在一行,如下所示: 

<style>
ul,li{
    padding:0;
    margin:0;
}
li{
    display:inline-block;
    border:1px solid #000;
}
</style>

<ul>
    <li>TianJin</li><li>ShangHai</li><li>SuZhou</li><li>NanJing</li>
</ul>

    再次在浏览器中打开的时候,效果就变成:

                    技术分享

    令人惊讶的是小空隙居然不见了!笔者对文档的修改实际上只是将3个Enter去掉,怎么会让小空隙消失呢!突然灵光一闪,笔者想起了这样一个知识点,在浏览器中

  空白符是不会被浏览器忽略的,多个连续的空白符会被浏览器自动合并成1个。我们编写代码时写的空格,换行符都会产生空白符。所以自然而然的两个元素之间会有空

  白符,如果将上述例子中的li标签写在一行,那么空白符会消失,菜单自然也就紧凑了起来。

    但代码中把标签写在一行终归不是方法,那如何才能优雅的去掉小空隙呢!说到底,空白符也是字符,所以可不可以设置font-size为0呢?所以将代码如下修改:

<style>
ul,li{
    padding:0;
    margin:0;
    font-size:0px;
    text-align:center;
}
li{
    display:inline-block;
    border:1px solid #000;
    font-size:12px;
    width:120px;
}
</style>

<ul>
    <li>TianJin</li>
    <li>ShangHai</li>
    <li>SuZhou</li>
    <li>NanJing</li>
</ul>

    代码中除了修改字体大小为0外,并且设置了li元素的宽度,以及文字居中对齐等,然后浏览器端显示的效果为:

          技术分享

    怎么样!效果还算可以,然后你可以在添加额外的代码使菜单显得更加美观!上面只是一些核心的东西。总结一下,从我们简简单单的html文件到浏览器端显示的绚丽的

  效果的过程,真是一件神奇的事情!因为我们只是敲了一系列的字符而已,经过浏览器的转换,变成华丽页面。在此过程中,我们的html文件相当于浏览器这个系统的输入,

  而输出呢就是那些华丽的界面。因此这和浏览器的“编译”过程以及渲染机制密不可分。所以我们要加深对浏览器工作过程的了解,这样会帮助我们走的更远。代码我已经上

  传到github,请有需要的同学前往https://github.com/bigVoyage/ST_hw01.

  

CSS中inline-block的应用