内联输入按钮在 Chrome 中的作用类似于块元素，但不是 Firefox答案

【问题标题】：Inline input buttons are acting like block elements in Chrome but not Firefox内联输入按钮在 Chrome 中的作用类似于块元素，但不是 Firefox
【发布时间】：2026-01-25 11:25:01
【问题描述】：

在 Firefox 中按我想要的方式工作（包含 <input /> 按钮的 div 展开并且按钮都在一行上）。在 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 以编程方式更改为 inline-block：

btn1.style.display = "inline-block";
btn2.style.display = "inline-block";
btn3.style.display = "inline-block";

任何想法为什么它在 Chrome 和 Firefox 中的显示不同？我需要它像在 Firefox 中那样在一行中显示所有内容（即内联）。干杯。

编辑：在上面的 javascript 中更改为“inline-block”。仍然显示相同（即垂直而不是水平）。

【问题讨论】：

必须是inline-block，显示改变样式的程序
我试过inline-block，正如我所说的。改变它的代码也在那里。
尝试设置#popup{min-width: auto;}
@לבנימלכה 结果相同。
你为什么不用display:flex??

标签： javascript css

【解决方案1】：

考虑使用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>

【讨论】：

干杯伙伴。适用于 Firefox 和 Chrome。

【解决方案2】：

使用display:flex 到#popup

function display(){
document.getElementById("popup").style.display = "flex";

}

#popup {
    width: auto;
    height: auto;
    display:none;
}
input {

    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

  <div id="popup">
    <input type="button" id="btnTag1" value="1"/>
    <input type="button" id="btnTag2" value="1"/>
    <input type="button" id="btnTag3" value="1"/>
  </div>
  <div id="loader"></div>

<button onclick="display()">display</button>

【讨论】：