不尊重CSS宽度属性

我在Joomla中使用virtmart将一些格式化的div标签添加到网站。我迄今为止取得了成功。我修改了我们用来包含一个包含我的自定义内容的css文件“article.css”的模板。不尊重CSS宽度属性

我所拥有的是围绕两个内联div的div封装，它们都包含文本。第一个内联div有一个给定的宽度，所以当你看到文本时，第二个div文本将与eachother排队，就像选项卡一样。这在我自己的测试html文件中运行时是完美的，但是当我在网站上使用它时，width属性不起作用。

使用firefox的“检查元素”，可以看到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

有没有人看到是什么原因造成这种情况？谢谢。

来源

2014-03-18 Drifter64

我从您发布的代码中看到，您在内联元素上使用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; 
}

来源

2014-03-18 18:27:43

做出了这个改变，它的工作原理！我猜测它在我的test.html中起作用，因为这种情况远没有我的joomla页面那么复杂，而且我的浏览器能够以我打算的方式解释我的“格式错误的CSS”？ :) – Drifter64

@ Drifter64实际上，浏览器无关紧要，除非某些声明会覆盖其他声明。我不确定你的测试用例，但是“内联”元素和“宽度”属性是[两件事不一起]（http://jsbin.com/kilak/1/edit）:) –

行内元素本质上不考虑宽度声明。尝试使用inline-block

来源

2014-03-18 18:27:51 rgthree

不尊重CSS宽度属性

回答

相关问题