html - 宽度根本不改变div

Question

这里有一个奇怪的问题，我看不出问题所在!我正在使用类 sale_container 设置整个元素的宽度。但它的宽度根本没有改变!

参见 JSFiddle Demo

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 中预览它时，它看起来像这样:

Answer 1

可能包含来自备用 CSS 源的其他样式。您是否尝试过使用 Inspect Element 查看 div，看看它是否应用了任何意想不到的样式？如果您右键单击任何元素，Chrome 本身就具有内置功能。

很乐意提供帮助。