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>

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

  • 相关阅读:
    Graylog安装操作
    CF1012C Hills
    MySQL 加锁处理分析
    2.22考试
    int(1)和int(11)是否有区别?
    「LibreOJ NOI Round #1」验题
    MySQL一致性非锁定读
    [学习笔记]凸优化/WQS二分/带权二分
    MySQL latch小结
    [八省联考2018]林克卡特树lct——WQS二分
  • 原文地址:https://www.cnblogs.com/thq1218/p/4532849.html
Copyright © 2011-2022 走看看