上一节:
下一节:

  CSS 内联块

  • display:inline-block

    相比之下display:inlinedisplay:inline-block主要区别在于允许在元素上设置宽度和高度。此外, display:inline-block顶部和底部边距/填充设置都可以设置,但display:inline却不能。相比之下display:block,主要区别在于display:inline-block元素之后不添加换行符,因此元素可以位于其他元素旁边。下面的示例示出了不同的行为display:inlinedisplay:inline-blockdisplay:block

    span.a {
              display: inline; /* span的默认值 */
              width: 100px;
              height: 100px;
              padding: 5px;
              border: 1px solid blue;
              background-color: yellow;
            }
    
            span.b {
              display: inline-block;
              width: 100px;
              height: 100px;
              padding: 5px;
              border: 1px solid blue;
              background-color: yellow;
            }
    
            span.c {
              display: block;
              width: 100px;
              height: 100px;
              padding: 5px;
              border: 1px solid blue;
              background-color: yellow;
            }
    尝试一下
  • 使用内联块创建导航链接

    一个常见用途display:inline-block是水平而不是垂直显示列表项。以下示例创建水平导航链接:

    .nav {
                      background-color: yellow;
                      list-style-type: none;
                      text-align: center;
                      margin: 0;
                      padding: 0;
                    }
    
                    .nav li {
                      display: inline-block;
                      font-size: 20px;
                      padding: 20px;
                    }
    尝试一下
上一节:
下一节: