inline-block 样式问题(不在一行,间距)

span {

  display: inline-block;

}

设置样式后导致元素之间不在一行, 且有间距

<div>

  <span></span>

  <span></span>

</div>

解决不在一行的方法

span {

  display: inline-block;

  vertical-align: middle|top|bottom

}

解决间距问题,如果是javascript 拼接生成的不会出现这种问题

将span写在一行

<div>

  <span></span><span></span>

  或者

  <span></span><span>

  </span>

</div>

时间: 2024-10-15 05:35:44

inline-block 样式问题(不在一行,间距)的相关文章

CSS display:inline|block|inline-block差异

display:inline|block|inline-block三属性的区别和联系,block就是将元素显示为块级元素,inline就是将元素 显示为行内元素,CSS display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 详解CSS display:inline|block|inline-block的区别 ◆CSS display:block CSS display:block就是将元素显示为块级元素. blo

inline block inline-block总结

一.block表示块级元素,其元素通常会单独成一块,独占一行: 二.inline表示内联元素,不会产生换行,其排版会在一行显示,直到一行被占满. 三.常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等:常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR        等. 四.一般使用display:block与display:inline来改变元素的

inline,block,inline-block解析

display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是:  和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图

display:inline/block/inline-block

display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 说概念太模糊,来个真实案例吧. <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a><a href=&qu

关于 inline block 元素之间的空格

本篇文章由:http://xinpure.com/about-the-inline-block-element-between-spaces/ 说点什么 display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的... 最简单的方法就是把 inline-block 元素之间的回车删除,就是代码显示有点不美观,影响阅读. 方法总结 以下方法不保证浏览器兼容性问

css之display:inline-block与float区别(可以尝试用一下)

HTML的元素有多种display属性,比较常见的有display:none; display:block; display:inline和display:inline-block;等.详细可参阅W3Schools文档. 有些HTML元素自然地带有display:block;样式属性,比如    <div>    <h1>...<h6>    <p>    <ul>,<ol>,<dl>    <li>,<

display:inline-block之用法

HTML的元素有多种display属性,比较常见的有display:none; display:block; display:inline和display:inline-block;等.详细可参阅W3Schools文档. 有些HTML元素自然地带有display:block;样式属性,比如    <div>    <h1>...<h6>    <p>    <ul>,<ol>,<dl>    <li>,<

学习css(一)

font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif font:12px/22px 指 字体大小/字体行高 "\5b8b\4f53″ 就是 “宋体”.用 unicode 表示,不用 SimSun, 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法.注释乱码:强烈建议不要用中文注释. 新细明体 \65B0\7EC6\660E\4F53 细明体 \7EC6\660E\4F53 标楷体 \68

CSS——display(Block none inline等)属性的用法

在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示讲解方法来学习和了解DIV CSS display. 目录 CSS display使用 display的值有哪些 css display block显示 css display none隐藏 css display inline 一.CSS display使用     -   TOP 以下为DIV

block,inline和inline-block的区别

概念 block是块级元素,会被现实认为是单独的一块,会单独占一行. 常见的block元素有: DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等. inline内联元素,不会产生换行,一系列的inline在一行内显示,直到排满为止. 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等. inline-block:是将对象呈现为inline对象,但是对象的内容作为b