javascript - 嵌入式样式覆盖内联样式？

Question

所以我有一个带有嵌入式样式的按钮和一个通过内联样式将按钮样式更改为显示的函数:无。问题是嵌入式样式似乎覆盖了内联样式。所以，问题是:

• 内嵌样式不是应该优先于嵌入样式吗？我的代码有问题吗？？

如果我的代码没有任何问题:

• 如何让我的内联代码覆盖嵌入样式？

HTML

<div id="buttonDiv1" style="float:left;"><button id="btn1">Change units</button></div>
<div id="buttonDiv1" style="float:left; display:none;"><button id="btn2">Change units</button></div>
<div id="buttonDiv1" style="float:left; display:none;"><button id="btn3">Change units</button></div>
<input id="text" style="float:left;"></input>

<div onChange="jsfunction()">
<div style="float: left">Type: <select id="typeSelector">
  <option value="" disabled selected style="display:none;"></option>
  <option value="1">Instrumental Cables</option>
  <option value="2">Erected Piping Materials</option>
  <option value="3">Electric Cables</option>
</select>
    </div></div>

<div id="container" class="cont" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

JS

    function jsfunction(){
//Get from user which chart to display
var val = document.getElementById("typeSelector");

if(val.value==1){
document.getElementById("btn1").style.display="block";
document.getElementById("btn2").style.display="none";
document.getElementById("btn3").style.display="none";
}
else if(val.value==2){
document.getElementById("btn1").style.display="none";
document.getElementById("btn2").style.display="block";
document.getElementById("btn3").style.display="none";
}
else{
document.getElementById("btn1").style.display="none";
document.getElementById("btn2").style.display="none";
document.getElementById("btn3").style.display="block";
}
}

JSfiddle 演示问题:http://jsfiddle.net/4T4pb/1/

编辑:看来我的演示代码有问题所以我贴上了实际代码

Answer 1

我删除了多余的 div 及其 float 布局并使用了 display: inline;在你的按钮上，这样它们就不会断线:

抱歉，必须在此处粘贴 html，否则我无法链接 fiddle :

<button id="btn1">Change units</button>
<button id="btn2" style="display: none;">Change units</button>
<button id="btn3" style="display: none;">Change units</button>
<input id="text"></input>

http://jsfiddle.net/4T4pb/2/

这应该是您正在寻找的。