我尝试从左到右浮动5个按钮

Question

我试图让这5个图像从左到右排列，但它们是从上到下堆叠的。

这是我的HTML代码

<div style="backgroundColorButtons">
<img src="images/white01.jpg" alt= "White Background" width="236" height="35" type='button' value='White Background' onClick="javascript:changeBGC('#ffffff');return false"
onmouseover="this.src='images/white02.jpg';" 
  onmouseout="this.src='images/white01.jpg'" 
  onmousedown="this.src='images/white04.jpg'"
  onmouseup="this.src='images/white01.jpg'" />
</div>  

 <div style="backgroundColorButtons">
<img src="images/black01.jpg" alt= "Black Background" width="236" height="35" type="button" value='Black Background' onClick="javascript:changeBGC('#000000');return false" 
onmouseover="this.src='images/black02.jpg';" 
  onmouseout="this.src='images/black01.jpg'" 
  onmousedown="this.src='images/black04.jpg'"
  onmouseup="this.src='images/black01.jpg'" />
  </div>

<div style="backgroundColorButtons">
<img src="images/red01.jpg" alt= "Red Background" width="236" height="35" type='button' value='Red Background' onClick="javascript:changeBGC('#ff0000');return false" 
onmouseover="this.src='images/red02.jpg';" 
  onmouseout="this.src='images/red01.jpg'" 
  onmousedown="this.src='images/red04.jpg'"
  onmouseup="this.src='images/red01.jpg'" />
  </div>

还有两个具有类似代码的按钮

这是我正在使用的CSS代码；

.backgroundColorButtons{
float: left;
}

Answer 1

使用class代替style

<div class="backgroundColorButtons">

我还注意到，您使用JS更改状态的方式是相当痛苦的，无论是对您来说，总有一天会编辑代码的人，还是用户自己。在每次事件中(直到所有图像都被浏览器缓存)，您都会向服务器请求一个新图像，这会导致不专业的时间间隔/等待新图像加载。

尽可能(任何地方都可能)避免内联JavaScript。

探索精灵图像技术。

Answer 2

#container
{display:table;width:100%;}
#row{display:table-row;}
.left{display:table-cell;padding:10px;}     

the html

   <div id="container">
   <div id="row">
        <div class="left">1st image</div>
            <div class="left">2nd  image</div>
            <div class="left">3rd  image</div>  
   </div>
   </div>

Answer 3

在您的div声明中有无效的语法：

<div style="backgroundColorButtons">

如果您想要将类backgroundColorButtons分配给某个div，则需要将其更改为：

<div class="backgroundColorButtons">

允许使用<div style="">。但仅用于定义内联样式，如下所示：

<div style="float: left;">

您还应该考虑为浮动元素定义width。