zoukankan      html  css  js  c++  java
  • display:inline/block/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>

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

  • 相关阅读:
    mysql安装遇到的坑
    git pull 、git fetch、 git clone
    MD markdown入门
    Libevent:8Bufferevents高级主题
    Libevent:6辅助函数以及类型
    Libevent:5events相关
    Libevent:4event loop
    Libevent:3创建event_base
    Libevent:2设置
    Libevent:1前言
  • 原文地址:https://www.cnblogs.com/thq1218/p/4532849.html
Copyright © 2011-2022 走看看