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 Content width: 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;
}

Answer 2

内联元素本质上不尊重宽度声明。尝试使用inline-block

CSS Width属性未得到遵守

2 个答案: