Question

我想在Firefox中使用它（包含@api.model def voucher_move_line_create(self, voucher_id, line_total, move_id, company_currency, current_currency): res = super(account_voucher, self).voucher_move_line_create(voucher_id, line_total, move_id, company_currency, current_currency)按钮的div扩展，按钮全部在一行上）。在Chrome中，它会弹出每个按钮。这是针对浏览器扩展中的弹出窗口，如果它与问题相关。

弹出窗口的HTML：

<input />

CSS：

<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>

输入按钮通过JS以编程方式更改为内联块：

#popup {
    width: auto;
    height: auto;
}
input {
    display: none;
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

为什么它在Chrome中与Chrome有不同的显示方式？我需要它像在Firefox中一样显示所有内容（即内联）。欢呼声。

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

Answer 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>

Answer 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>

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

2 个答案: