html - 我正在尝试从左到右 float 5个按钮

我正在尝试使这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;
}

最佳答案

代替style使用class

<div class="backgroundColorButtons">

我还注意到，使用JS更改状态的方式非常麻烦，无论是对于一天要编辑代码的用户，还是用户自己来说，都是如此。在每个事件上（直到所有图像都被浏览器缓存），您都请求服务器提供新图像，从而导致非专业的时间间隔/等待-加载新图像。

尽可能避免使用内联JavaScript。
探索精灵图像技术。

关于html - 我正在尝试从左到右 float 5个按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20309980/