宽度不能改变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

回答

相关问题