如何让jQueryUI sortable的li元素与div元素同行显示

太懂这种明明看起来简单却卡半天的感受了！jQuery UI Sortable的li元素自带的默认样式简直是布局隐形坑，尤其是要和div、p这类块级元素凑在同一行的时候。我给你整理了两个靠谱的解决方案，亲测能解决问题：

其实你之前的方案没生效，主要是因为jQuery UI Sortable会自动给可排序的li元素加上display: block的默认样式，再加上div、p本身就是块级元素，它们自然会各自占满一行，导致换行。之前试的inline-block没起作用，大概率是没覆盖掉Sortable强制加上的块级样式，或者容器的布局上下文没理顺。

方案1：强制inline-block+样式覆盖 #

直接给所有需要同行的元素明确设置inline-block，同时强制覆盖Sortable的默认样式：

/* 父容器：禁止内部元素自动换行 */
.main-div {
  white-space: nowrap;
  box-sizing: border-box;
}

/* Sortable的ul容器：改成行内块，不占满整行 */
#your-sortable-list {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle; /* 和旁边元素垂直对齐 */
}

/* 可排序li：强制覆盖Sortable的block样式 */
#your-sortable-list li {
  display: inline-block !important;
  margin: 0 6px;
  white-space: normal; /* 让li内部文本正常换行 */
  padding: 4px 8px; /* 增加点击区域，方便拖拽 */
}

/* 同行的文本元素：改成行内块，对齐 */
.secondary_text, .main-div p {
  display: inline-block;
  vertical-align: middle;
  margin: 0 12px;
}

方案2：Flexbox布局（更省心的选择） #

用Flexbox的话，完全不用和Sortable的默认样式较劲，直接给父容器设置flex就能搞定所有同行需求：

/* 父容器：开启flex布局，垂直居中所有元素 */
.main-div {
  display: flex;
  align-items: center;
  gap: 12px; /* 元素之间的间距，代替margin更整洁 */
  box-sizing: border-box;
  width: 1300px;
}

/* Sortable的ul容器：内部也用flex让li横向排列 */
#your-sortable-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 6px;
}

/* li元素：只需保证拖拽区域足够即可 */
#your-sortable-list li {
  padding: 4px 8px;
  border: 1px solid #ddd;
}

这个方案的优势是兼容性好，而且不用纠结元素的默认显示类型，Flex会自动把所有子元素（ul、span、p）放在同一行，对齐方式也很好控制。

• 如果用了!important，尽量只针对特定的li元素，别影响全局样式
• 检查Sortable的初始化代码，有没有设置helper或者appendTo这类选项，它们可能会临时改变元素的display属性
• 如果元素内容太长导致挤换行，可以给父容器加flex-wrap: wrap（Flex方案）或者overflow-x: auto（inline-block方案）

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