CSS Width属性未得到遵守

Question

我在Joomla中使用virtuemart添加了一些格式化的div标签.到目前为止,我在这方面取得了成功.我修改了我们用来包含css文件"article.css"的模板,其中包含我的自定义内容.

我所拥有的是一个围绕两个内联div的div包装器,它们都包含文本.第一个内联div具有给定的宽度,因此当您查看文本时,第二个div文本将彼此对齐,就像选项卡一样.这在我自己的测试html文件中运行时非常有效,但是当我在网站上使用它时,width属性不起作用.

使用firefox的"Inspect Element",可以看到div继承了一个宽度并且没有被覆盖,但它仍然显示好像宽度从未出现过!

这是我的CSS:

div.Item_Property
{
    border: 2px solid black;
    padding-left: 5px;
    margin: 2px;
    font-size: 16px;
    width: 320px;
}

div.Property_Name
{
    display: inline;
    margin-right: 10px;
    color: #C41163;
    width: 240px;
}

div.Property_Value
{
    display: inline;
}

这是我的HTML片段:

<div class="Item_Property">
    <div class="Property_Name">SKU:</div>
    <div class="Property_Value">TL-5902/S</div>
</div>
<div class="Item_Property">
    <div class="Property_Name">Catalog #:</div>
    <div class="Property_Value">15-5902-21530</div>
</div>
<div class="Item_Property">
    <div class="Property_Name">Tadiran Series:</div>
    <div class="Property_Value">iXtra</div>
</div>

我真的不明白发生了什么.在过去,如果我有一个CSS问题,FireFox的"Inspect Element"会指示我的CSS在那里,但是被覆盖了.在这种情况下,它没有显示这一点,但我猜测网站上的一些设置仍然是我的自定义CSS

有没有人看到是什么原因造成的？谢谢.

Answer 1

我从您发布的代码中看到的是您在内width联元素上使用属性.

10.2内容宽度:'width'属性

此属性不适用于未替换的内联元素.未替换的内联元素框的内容宽度是其中的呈现内容的内容宽度(在子项的任何相对偏移之前).

width/ heightproperties不适用于未替换的内联元素.如果要保持div.Property_Name内联,则需要使用属性inline-block值display.

div.Property_Name {
    display: inline-block; /* <-- Change the display type */
    margin-right: 10px;
    color: #C41163;
    width: 240px;
}