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

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

    一、总结

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

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

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

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

    方法如下:

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

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

    测试实例:

    <style type="text/css">
    .sa span {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 {60px; text-align:center;  display:block; float:left;}

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

    测试实例:

    <style type="text/css">
    .sb {300px;list-style:none;font-size:15px;}
    .sb li {list-style:none;100%;margin:10px 0px 0px 0px;}
    .sb span {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 {60px; text-align:center;  display:inline-block;}

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

    测试实例:

    <style type="text/css">
    .sc {300px;list-style:none;font-size:15px;}
    .sc li {list-style:none;100%;margin:10px 0px 0px 0px;}
    .sc span {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;}

  • 相关阅读:
    家庭记账本app进度之对于登录和注册两个界面点击按钮的相互跳转
    家庭记账本app进度之复选框以及相应滚动条的应用
    家庭版记账本app之常用控件的使用方法
    android 软件(app)之家庭版记账本首次进行helloword等相关测试
    家庭记账本app进度之android中AlertDialog的相关应用以及对日期时间的相关操作(应用alertdialog使用的谈话框)
    家庭版记账本app进度之关于android界面布局的相关学习
    家庭记账本app进度之关于单选按钮的相关操作(添加点击按钮事件以及点击单选更改事件)
    家庭记账本app进度之ui相关概念控制ui界面与布局管理
    家庭版记账本app进度之对于按钮的点击事件以及线性布局以及(alertdialog)等相关内容的应用测试
    乱了
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9023868.html
Copyright © 2011-2022 走看看