如何使用JavaScript在<li>标签内插入按钮并实现与文字同行显示

问题根因 #

你当前的按钮被添加到了外层列表容器（ul/ol）中，而非li元素内部。li本身是默认块级元素，会独占一行，所以按钮自然被挤到下一行。

解决方案 #

1. 调整JS插入逻辑

将按钮插入到li节点内部，而非外层列表，修改后代码如下：

var list = document.getElementById('listaUnidadesCanjeadasAgregadas');
var entry = document.createElement('li');
var btnDlt = document.createElement('button');

entry.appendChild(document.createTextNode(inputSerie.val()));
// 核心修改：把按钮添加到li元素内部
entry.appendChild(btnDlt);
list.appendChild(entry);

btnDlt.className = "btn-delete btn btn-default btn-xs glyphicon glyphicon-trash";

2. 可选CSS适配

如果调整JS后还有对齐、间距问题，可以补充以下CSS调整样式：

/* 设置li为flex布局，内容垂直居中 */
#listaUnidadesCanjeadasAgregadas li {
  display: flex;
  align-items: center;
  padding: 4px 8px;
}
/* 给按钮添加左侧间距，和文字分开 */
.btn-delete {
  margin-left: 12px;
}
/* 如果需要按钮靠右对齐，给li加justify-content: space-between即可 */

修改完成后即可实现文字和按钮同行展示的效果。

内容的提问来源于stack exchange，提问作者Sebastian