zoukankan      html  css  js  c++  java
  • display:inline-block; 到底是个啥玩意?

    display:inline; 内联元素,简单来说就是在同一行显示。
    display:block; 块级元素,简单来说就是就是有换行,会换到第二行。
    display:inline-block; 就是在同一行内的块级元素。

    说概念太模糊,来个真实案例吧。

    <a href="#" style="display:inline;100px;height:100px;background:#ccc;">链接一</a>

    <a href="#" style="display:inline;100px;height:100px;background:#ccc;">链接一</a>

    A默认就是一行,所以inline用在这里是废的。宽高度设置也是费的。

    <a href="#" style="display:block;100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:block;100px;height:100px;background:#ccc;">链接一</a>

    块状,这里高宽度就生效了,但是因为是块状,前后有换行符,所以这是两行了。

    <a href="#" style="display:inline-block;100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:inline-block;100px;height:100px;background:#ccc;">链接一</a>

    这样就是同时达到块状,而且在同一行显示。

  • 相关阅读:
    C# 数据库连接字符串拼接
    C# 线程同步计数存在的问题
    字符串操作
    字符串位置
    6个基本函数
    占位符
    str转换成int
    python运算符6
    python运算符5
    python运算符4
  • 原文地址:https://www.cnblogs.com/aomi/p/3459419.html
Copyright © 2011-2022 走看看