css如何设置span的相对宽度?下面本篇文章就来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
因为span标签元素属于内联元素,而内联元素是忽略宽度和高度的,无法设置宽度和高度。
可以使用display属性将span元素转换为块状元素或行内块状元素。块状元素或行内块状元素的高度、宽度、行高以及顶和底边距都可设置。display:block--将元素显示为块级元素,此元素前后会带有换行符。
display:inline-block--将元素显示为行内块元素;此元素和其他元素都在一行上,不会自动换行,默认排列方式为从左到右;
然后使用width属性配合相对长度单位%来设置span的相对宽度。
示例:
div{
border:1px solid red ;
}
span{
display: block;
width: 50%;
border: 1px solid palegreen;
}
fetr
效果图:
span的宽度是相对于div和浏览器窗口的,总是其的50%。
更多前端开发知识,请查阅 HTML中文网 !!