span 元素无法设置宽度问题

Posted tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了span 元素无法设置宽度问题相关的知识,希望对你有一定的参考价值。

span 元素为行内元素,没有width属性,需要转换为块级元素才可以设置width;

拓展:html元素分为块级元素,行内元素、可变元素。

 

行内元素与块级元素直观上的区别

1 、行内元素会在一条直线上排列,都是同一行的,水平方向排列

    块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同,主要是盒模型属性上

行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

 

行内元素转换为块级元素

        display:block (字面意思表现形式设为块级)

 

                    display值:

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。

引用 http://blog.csdn.net/sykent/article/details/7738408

 
 

以上是关于span 元素无法设置宽度问题的主要内容,如果未能解决你的问题,请参考以下文章

使用纯 css 根据另一个元素的宽度设置跨度的宽度

html 中文标点 强制换行

行内元素可以设置padding和margin吗

html中怎么把图片按比例缩放在<span>里面

简述div元素和span元素的区别

给span标签设置宽度