不尊重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寬度屬性

回答

相關問題