zoukankan      html  css  js  c++  java
  • 关于span不能设置宽度及span自动换行的解决方法

    span标记的样式设定width属性:
    <html>
    <body>
    <span style="80%">新闻标题</span><span style="20%">2006-5-27</span>
    </body>
    </html>
    加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这一句,span的宽度失效,会发现不会产生效果。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <body>
    <span style="80%">新闻标题</span><span style="20%">2006-5-27</span>
    </body>
    </html>


    如果设置display:block,width属性生效,但是此时的span跟div一样了。 DIV会自动换行
    span不是块级的所以其宽度是依据内容的多少而定,你必需要设定span为BLOCK这样才可以设置宽度!
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <body>
    <span style="80%; display:block; float:left; ">新闻标题</span><span style="20%">2006-5-27</span>
    </body>
    </html>

    如果设置display:inline-block,则span并列在同行,而且width属性生效。

    元素display属性的常见值说明:

    block:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。
    inline:内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行。
    inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
    non:隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间。
    设置 span 宽度的完美解决方案 (不自动换行

    下面代码的 CSS定义完美解决了span的宽度设置问题。代码可以同时兼容IE\FF各种版本。
    <style type="text/css">
    span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; 150px;}
    </style>
  • 相关阅读:
    驱动下的异常处理
    头文件 .h 与源文件 .ccp 的区别
    驱动程序进阶篇
    驱动中链表的使用
    内存操作相关内核 API 的使用
    链表的概念、建立、删除与插入
    编写简单的 NT 式驱动程序的加载与卸载工具
    驱动程序入门篇
    c++ 指针的简单用法
    CTL_CODE 宏 详解
  • 原文地址:https://www.cnblogs.com/johnsonshu/p/2568396.html
Copyright © 2011-2022 走看看