为什么按钮在div元素后跳转到新行？

Question

你能解释为什么一个按钮在<div>元素之后跳转到一个新行吗？它是内联元素，对吧？为什么它不保持内联？我不能把那个按钮放在<div>里面因为<div>不断用Jquery更新，所以它会删除（覆盖）它。在<div>之后有没有办法让按钮不跳到新线？

<div >some text</div>
<button>MyButton</button>

Answer 1

为什么按钮会在元素后跳转到新行？

这是因为div默认是一个块元素（display：block），这意味着它从一个新行开始并占据整个宽度，因此它旁边的按钮显示在下一行。若要更改此行为，请使用css将div的显示属性更改为内联。

有关详细信息see this

我希望它有所帮助。

Answer 2

你可以包装两个元素并将display: flex添加到包装器中。

Guide to Flexbox

.wrapper {
  display: flex;
}

<div class="wrapper">
  <div>some text</div>
  <button>MyButton</button>
</div>

Answer 3

div不是内联元素，它们是块元素。

将div元素作为内联元素的最佳方法是在样式表中为其指定样式display:inline。

你也在所有div元素上使用Jquery吗？如何使用class或ID？