寬度不能改變div

奇怪的問題，我不能看到問題！我使用類sale_container設置整個元素的寬度。但它的寬度並沒有改變！寬度不能改變div

CSS：

/*Sale styles*/ 
.add_sales input { 
    background:none; 
    border:none; 
    color:#FFF; 
} 
.sales_toolbar input { 
    width:30px; 
} 
.sale_container { 
    width:500px; 
    border:2px solid #FFF; 
} 
.sale_image { 
    height:200px; 
    width:200px; 
    background-size:cover; 
    border-radius:10px; 
} 
.sale_image_container { 
    border:solid #000 1px; 
    float:left; 
    border-radius:10px; 
    background-color:#353535; 
} 
.sale_image_container p { 
    margin:10px; 
} 
.sales_toolbar { 
    float:right; 
}

HTML：

<form class="add_sales" name="add_sales" action="php/process_sales.php" method="post"> 
    <div class="sale_container"> 
     <div class="sale_image_container"> 
      <div style="background-image:url(data/images/20140121/0/image8.jpg)" class="sale_image"></div> 
      <p>KR</p> 
     </div> 
     <div class="sales_toolbar"> 
      <input type="text" readonly value="KRR" id="50_selected" /> <!-- Selected --> 
     </div> 
    </div> 
</form>

這似乎是工作在的jsfiddle，但是當我在Chrome中預覽它，它看起來像這個： Strangeeee

來源

2014-01-22 Martyn Ball

它改變了我：http://jsfiddle.net/hashem/6fVBA/4/ –

可能的替代CSS源包含額外的樣式。您是否嘗試過使用Inspect Element來查看div，並查看它是否有任何意外的樣式被應用？如果您右鍵點擊任何元素，Chrome本身就具有內置的功能。 – justis

在你發佈的jsfiddle和Chrome（當我把它放在本地html文件中）時，它看起來都一樣。我甚至會放入一張照片，並且兩者都顯示相同。 jblasco的建議可能在這裏有一些優點。 – JackArbiter

其他樣式可能包含在備用CSS源代碼中。您是否嘗試過使用Inspect Element來查看div，並查看它是否有任何意外的樣式被應用？如果您右鍵點擊任何元素，Chrome本身就具有內置的功能。

很高興幫助。

來源

2014-01-23 01:48:33 justis

將位置設置爲sale_container的絕對位置以更改寬度。

.sale_container{ 
    width: 300px; 
    position: absolute; 
    border: 2px solid #E97676; 
}

使用螢火蟲（http://getfirebug.com/）檢查html元素和css屬性。

來源

2014-01-22 22:11:34

這應該是完全沒有必要的。 – justis

不行，我試過顯示：block，float：left –

我有螢火蟲，我更喜歡使用內建於HTML編輯器tbf的Chromes，看起來更好。如果我在瀏覽器編輯器中檢查「sale_container」樣式，它的寬度爲190px。如果我在瀏覽器編輯器中更改它，它實際上工作正常..：S –

寬度不能改變div

回答

相關問題