实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;)

一、总结

1、将span从行内元素变成行内快元素就可以调了: 设置样式的时候加上 display:inline-block; 即可;

二、CSS中如何把Span标签设置为固定宽度

本文总结CSS中SPAN标签的固定宽度设置问题,一般在日志文章标题+日期展示时经常遇到,所以就顺便把SPAN几种组合情况一起汇总一下。包括独立行固定宽度、同行固定宽度和同行居中固定宽度。关于SPAN标签浮动靠右对齐方法,目前考虑到兼容IE6前提下,似乎只有反向浮动和相对定位两种方式(参文末),没发现更好的方法。

一、形如<span>ABC</span>独立行设置SPAN为固定宽度

方法如下:

span {width:60px; text-align:center; display:block; }

实际验证结果:IE6 OK, FIREFOX 3 OK。

测试实例:

<style type="text/css">
.sa span {width:100px; text-align:center; display:block; background:#C00;margin:10px 0px 0px 0px;color:#FFF;font-size:15px;}
</style>
<div class="sa">
<span>天缘</span>
<span>天缘博客</span>
<span>天 缘 博 客</span>
</div>

测试结果:

二、形如<span>ABC</span>DEF格式行设置SPAN为固定宽度

方法如下:

span {width:60px; text-align:center;  display:block; float:left;}

实际验证结果:IE6 OK, FIREFOX 3 OK。

测试实例:

<style type="text/css">
.sb {width:300px;list-style:none;font-size:15px;}
.sb li {list-style:none;width:100%;margin:10px 0px 0px 0px;}
.sb span {width:100px; text-align:center; display:block; float:left; background:#C00;color:#FFF;}
</style>
<ul class="sb">
<li><span>天缘</span>博客</li>
<li><span>天缘博客</span>欢迎</li>
<li><span>天 缘 博 客</span>欢 迎 光 临</li>
</ul>

测试结果:

三、形如ABC<span>DEF</span>GH格式行设置SPAN为固定宽度

方法如下:

span {width:60px; text-align:center;  display:inline-block;}

实际验证结果:IE6 OK, FIREFOX 3 OK。

测试实例:

<style type="text/css">
.sc {width:300px;list-style:none;font-size:15px;}
.sc li {list-style:none;width:100%;margin:10px 0px 0px 0px;}
.sc span {width:100px; text-align:center; display:inline-block; background:#C00;color:#FFF;}
</style>
<ul class="sc">
<li>Welcome to <span>天缘</span>博客</li>
<li>Welcome to <span>天缘博客</span>欢迎</li>
<li>Welcome to <span>天 缘 博 客</span>欢 迎 光 临</li>
</ul>

测试结果:

提示:完美兼容就是把display属性设为inline-block,同时也可兼容前两种情况。

四、block,inline,inline-block之间区别

display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性;

display:inline;——类似与<a>、<strong>标签的宽高等属性不可定制的元素特性;

display:inline-block;——“全”可定制属性的元素特性;

五、如何设置让SPAN float:right不换行

1、如何让<li>AAA<span>BBB</span></li>里头的BBB靠右对齐且不换行?

如果对span使用float属性,在IE6下会导致span换到下一行,Firefox则正常。可以采用下面相对定位方法实现同行且居右对齐。

li { position:relative;}

li span{ position:absolute;right:0px;}

即可实现。

2、反着写<span>也比较方便

比如写做<li><span>AAA</span>BBB</li>,这样把AAA放到SPAN里,BBB放到外面。只需要:

li {text-align:right;}

li span{float:left;}

实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;)的更多相关文章

  1. vs2012后设置显示行号结果整个窗口都变成黑色了,怎么变回来

  2. html——行内元素、块元素、行内块元素

    行内元素:span  ,a,  ,strong , em,  del,  ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...

  3. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  4. span设置宽度有效无效问题

    在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以.例如, <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  5. css块元素及内联元素

    块级元素主要有: address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , ...

  6. html块元素和内联元素

    html块元素和内联元素: 对于html各种标签/元素,可以从块的层面做一个分类:要么是block(块元素),要么是inline(内联元素). block元素的特点: 总是另起一行开始: 高度,行高以 ...

  7. CSS 两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行解决办法

    我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...

  8. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  9. CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

随机推荐

  1. UML类图中的几种关系总结

           UML类图,描写叙述对象和类之间相互关系的方式包含:依赖(Dependency).关联(Association).聚合(Aggregation).组合(Composition).泛化(G ...

  2. C++模板类代码只能写在头文件?

      这个问题,实际上我几年前就遇到了.最近写个模板类玩的时候,再次遇到.   当我非常仔细的将定义和实现分开,在头文件中保留了最少的依赖后,一切就绪.cpp单独编过.但是当使用的时候,就会报告所有的函 ...

  3. javascript中易犯的错误有哪些

    javascript中易犯的错误有哪些 一.总结 一句话总结: 比如循环中函数的使用 函数中this的指向谁(函数中this的使用) 变量的作用域 1.this.timer = setTimeout( ...

  4. javafx image zoom

    public class EffectTest extends Application { private final ImageView imageView = new ImageView(); p ...

  5. javafx ComboBox Event and change cell color

    public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...

  6. spark源码阅读

    根据spark2.2的编译顺序来确定源码阅读顺序,只阅读核心的基本部分. 1.common目录 ①Tags②Sketch③Networking④Shuffle Streaming Service⑤Un ...

  7. iOS开发--漫谈内存管理(一)

    1.MRC与ARC 苹果提供两种内存管理机制:一种是MRC(manual reference count),即手动引用计数:还有一种是ARC(auto reference count).即自己主动引用 ...

  8. LeetCode_ZigZag Conversion

    一.题目 ZigZag Conversion Total Accepted: 31399 Total Submissions: 140315My Submissions The string &quo ...

  9. absolute、relative,toggle()

    測试代码例如以下: <div> <div class="global">不应用样式</div> <div class="glob ...

  10. [NowCoder]牛客OI周赛1 题解

    A.分组 首先,认识的人不超过3个,因此不存在无解的方案 考虑直接构造,先把所有点设为1,顺序扫一遍把有问题的点加入队列 每次取队头,将其颜色取反,再更新有问题的点 复杂度:考虑到每个点不会操作2次, ...