Question

我正在尝试使用Chrome扩展程序在页面上插入一些按钮。我没有该页面，也无法控制CSS。

我希望它们全部成一行。现在，它们都出现在自己的行上并占据了整个宽度。

var inMailButton = $('<button  type="button">Add to Response</button>')
var notInterested = $('<button class="column" type=button>Not Interested</button>')
var noRelo = $('<button class="column" type=button">No Relo</button>')
var interested = $('<button class="column" type=button">Interested</button>')

var responseLocation = $('#mailbox-main')

responseLocation.prepend(notInterested)
responseLocation.prepend(noRelo)
responseLocation.prepend(interested)
responseLocation.prepend(inMailButton)

它出现在页面上，如：

Add To Response
Not Interested
No Relo
Interested

我希望他们并排

Add to Response | Not Interested | No Relo | Interested

我试图先将它们添加到<span>中，然后再将其添加到responseLocation中，但是我无法使其按需工作。

我该怎么做？

Answer 1

添加到CSS：

#mailbox-main button {
   display: inline-block;
}

Answer 2

您可以通过几种方式执行此操作...

内联阻止方式：

button {
    display: inline-block
}

或者使用弹性盒，但是那样需要一个外壳div ...

<div class="buttonContainer">
    <button>button 1</button>
    <button>button 2</button>
    <button>button 3</button>
</div>

//CSS
.buttonContainer {
   display: flex;
}

Answer 3

尝试将display flex添加到您的responseLocation

#mailbox-main{
display:flex;
}

Answer 4

与其给它们提供类，不如将它们分组在div class =“ row”内，然后在div class =“ form-group”内，然后给他们col-md-02类，它们将像这样

在一行中将多个按钮插入页面

4 个答案: