CSS 宽度属性不受尊重

我正在 Joomla 中向一个具有 virtualmart 的网站添加一些格式化的 div 标签。到目前为止我在这方面已经取得了成功。我修改了我们使用的模板，以包含一个 css 文件“article.css”，其中包含我的自定义内容。

我所拥有的是两个内联 div 的 div 包装器，两者都包含文本。第一个内联 div 具有给定的宽度，因此当您查看文本时，第二个 div 文本将彼此对齐，就像选项卡一样。当在我自己的测试 html 文件中运行时，它工作得很好，但是当我在网站上使用它时，宽度属性不起作用。

使用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 的“检查元素”会指示我的 CSS 存在，但被覆盖。在这种情况下它没有显示这一点，但我猜测该网站的某些设置仍然会弄乱我的自定义 CSS

有人看到是什么原因造成的吗？谢谢。

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

10.2 内容宽度：'width'属性 http://www.w3.org/TR/CSS2/visudet.html#the-width-property

此属性不适用于非替换的内联元素。这 非替换内联元素框的内容宽度是 在其中渲染内容（在子项的任何相对偏移之前）。

width/height属性不适用于非替换的内联元素。如果你想保留div.Property_Name内联，你需要使用inline-block作为价值display财产。

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