的高度和宽度没有效果

hongweigg

于 2018-08-20 09:57:09 发布

阅读量2.7k

点赞数

分类专栏： JavaScript 文章标签： html css span auto

本文链接：https://blog.csdn.net/hongweigg/article/details/81866224

版权

JavaScript 专栏收录该内容

122 篇文章

订阅专栏

本文介绍了如何解决HTML页面中元素宽度设置无效的问题。由于是行内元素，不能直接设置宽度，需将其转换为块级或行内块级元素。文章给出了具体的CSS样式调整方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

在HTML页面中设置""元素的样式，发现设置无效，通过查看其CSS属性值，发现总是为“auto”，即使加上“!important”提高其优先级别也无效：

<style>
    .aclass{
        background:#0092d8 url(gantt-images/equals.png);
    }
</style>

<span class="aclass" style="width:200px!important ;">ss</span>

解决：

标签属于行内元素（inline），所以无法设置高度和宽度；如果需要改变其宽高，就需要将其转变为块体元素（block）或行内块体元素（inle-block）：

span{display:inline-block;}

修改后的样式：

<style>
    .aclass{
        display:inline-block;
        background:#0092d8 url(gantt-images/equals.png);
    }
</style>

<span class="aclass" style="width:200px;">ss</span>

加上“inline-block”的display属性后，设置的宽度生效。