Javascript 内联块不显示

我试图让

li

元素和

div

成为“内联”，但现在

div

文本一直放在

li

元素的正下方。我正在使用

display:inline block

和jQuery，如下所示：

$('#list').append(
   '<div class="spanish">\
      <li>'+new_task+'</li>\
      <div>Test</div>\
   </div>');


.spanish {
   display:inline-block;
}

$（'#list'）。追加(
'\
“+新任务+”
\
试验\
');
.西班牙语{
显示：内联块；
}

正如@valeriysietov所提到的，

div

是块元素，

li

也是块元素

解决问题的一种方法是更改要附加的html的结构，因此它是

li

元素中的

span

元素

请注意，列表元素（即

ul

s或

ol

s）只能将

li

s作为其子元素，但

li

s可以将任何内容作为其子元素。参考：

假设您有一个id为#list的无序列表，您可以向其添加一个新的列表项，如下所示：

var new\u task=“遛狗”
var li_string=`
${new_task}:Test
`
$（'#list'）。追加（li#u字符串）


铺床
刷牙
正如@ValeriySiestov所提到的，
div
是块元素，
li
也是块元素

解决问题的一种方法是更改要附加的html的结构，因此它是
li
元素中的
span
元素

请注意，列表元素（即
ul
s或
ol
s）只能将
li
s作为其子元素，但
li
s可以将任何内容作为其子元素。参考：

假设您有一个id为#list的无序列表，您可以向其添加一个新的列表项，如下所示：


var new\u task=“遛狗”
var li_string=`
${new_task}:Test
`
$（'#list'）。追加（li#u字符串）


铺床
刷牙
div-默认情况下是块（显示：块）元素。它延伸到父对象宽度的100%
li-是列表中的一个项目（显示：列表项目），并且可以延伸到父项宽度的100%

如果要更改此行为，需要向div和li添加另一个显示值，如下所示

.spanish div, .spanish li {
    display: inline;
}

或

在您的代码中，您使用了
在slide中，这实际上是不对的，这并不重要，它可以工作，但是
必须在div中-默认情况下是一个块（display:block）元素。它延伸到父对象宽度的100%
li-是列表中的一个项目（显示：列表项目），并且可以延伸到父项宽度的100%

如果要更改此行为，需要向div和li添加另一个显示值，如下所示

.spanish div, .spanish li {
    display: inline;
}

或

在您的代码中，您在slide中使用了
，这实际上是不对的，这并不重要，它会起作用，但是
必须在您的代码中。您想在li下面打印div。有几件事需要注意：

li应始终位于UL或OL标签内。您当前的代码在语义上是错误的
只有李作为李的兄弟姐妹才能来。没有任何其他标记（您正在使用div）
位置使用css
如果对你有帮助，请检查下面的答案


$（文档）.ready（函数（）{
var new_task=“行”；
$（“#列表”）。追加(
'\
\
“+新任务+”测试\
\
');
});
.row{
显示：内联；
清楚：两者都是：
寡妇：100%
}
.次行{
显示：内联；
明确：两者皆有；
左边距：2倍
}
从你的代码看来。您想在li下面打印div。有几件事需要注意：

li应始终位于UL或OL标签内。您当前的代码在语义上是错误的
只有李作为李的兄弟姐妹才能来。没有任何其他标记（您正在使用div）
位置使用css
如果对你有帮助，请检查下面的答案


$（文档）.ready（函数（）{
var new_task=“行”；
$（“#列表”）。追加(
'\
\
“+新任务+”测试\
\
');
});
.row{
显示：内联；
清楚：两者都是：
寡妇：100%
}
.次行{
显示：内联；
明确：两者皆有；
左边距：2倍
}

请提供更多代码，包括HTML和CSS标记的其余部分。
li
的唯一允许的父元素是
ul
和
ol
。您正在创建无效的HTML。您不能将
li
作为
div
的子级。继续@connexo的评论：您不能将
li
作为
div
的子级，但您可以将
div
作为
li
的子级。因此，不要附加类似
${new task}
测试的内容，您可以附加类似于
${new\u task}Test
的内容。在这种情况下，
span
可能比
div
更好，因为
span
是内联元素，而
div
是块元素。请提供更多代码，包括HTML和CSS标记的其余部分。
li
唯一允许的父元素是
ul
和
ol
。您正在创建无效的HTML。您不能将
li
作为
div
的子级。继续@connexo的评论：您不能将
li
作为
div
的子级，但您可以将
div
作为
li
的子级。因此，不要附加类似
${new task}
测试的内容，您可以附加类似于
${new\u task}Test
的内容。在这种情况下，出于您的目的，
span
可能比
div
更好，因为
span
是一个内联元素，而
div
是一个块元素。问题是这些元素没有以内联方式显示。仅供参考，我不是反对者，您没有修复无效的HTML OP创建。@connexo添加了注释，引用的列表元素只有
li
s作为其子元素，包括