在 Firefox 中按我想要的方式工作(包含 div 按钮的 <input /> 展开并且按钮都在一行上)。在 Chrome 中，它会在自己的行中弹出每个按钮。如果与问题相关，这是针对浏览器扩展中的弹出窗口。
弹出窗口的 HTML:
<body>
<div id="popup">
<input type="button" id="btnTag1" />
<input type="button" id="btnTag2" />
<input type="button" id="btnTag3" />
</div>
<div id="loader"></div>
</body>
CSS:
#popup {
width: auto;
height: auto;
}
input {
display: none;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
并且输入按钮通过 JS 以编程方式更改为内联 block :
btn1.style.display = "inline-block";
btn2.style.display = "inline-block";
btn3.style.display = "inline-block";
知道为什么它在 Chrome 中的显示与 Firefox 不同吗？我需要它像在 Firefox 中那样在一行(即内联)中显示所有内容。干杯。
编辑:在上面的 javascript 中更改为“inline-block”。仍然显示相同(即垂直而不是水平)。
最佳答案
考虑使用Flexbox .它会做你想做的。这是一个例子:
#popup {
display: flex;
height: auto;
}
input {
flex-grow: 1; //this is responsible for letting the buttons fill
background-color: #ff00ff;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}<div id="popup">
<input type="button" id="btnTag1" />
<input type="button" id="btnTag2" />
<input type="button" id="btnTag3" />
</div>关于javascript - 内联输入按钮在 Chrome 中的行为类似于 block 元素，但在 Firefox 中则不然，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50738499/