Question

我正在尝试将String stage1Json = "{$unwind:\"$destinatarios\"}"; Document stage1 = Document.parse(stage1Json); List<Document> pipeline = new ArrayList<Document>(); pipeline.add(stage1); AggregateIterable<Document> results = template.getDb().getCollection("foo").aggregate(pipeline); for (Document result : results) { System.out.println(result); }元素和一个li设为“内联”，但是现在div文本一直放在div元素的正下方。我正在使用li和jQuery，如下所示：

display: inline block

Answer 1

正如@ValeriySiestov所述，div是一个块元素，而li也是一个块元素。

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

请注意，列表元素（即ul或ol）只能以li作为其子元素，而li s可以具有任何子元素。参考：Can I use a div inside a list item?

假设您有一个ID为#list的无序列表，则可以像下面这样添加一个新的列表项：

var new_task = "walk the dog"

var li_string = `<li>${new_task}: <span>Test</span></li>`

 $('#list').append(li_string);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>make bed</li>
<li>brush teeth</li>
</ul>

请注意，变量new_task被插入到使用模板文字附加到列表的html字符串中。

模板文字语法：

string text ${expression} string text

Answer 2

div-默认为块（显示：块）元素。延伸至父母宽度的100％ li-是列表的一项（显示：list-item），并且延伸到父级宽度的100％

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

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

或

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

在您的代码中，您使用

inslide，这实际上不是正确的，这不是很关键，它将起作用，但是

必须在

Answer 3

从您的代码看来。您要在li以下打印div。有几件事要注意：

Li应始终位于UL或OL标签内。您当前的代码在语义上是错误的。
只有李来作为李的兄弟姐妹来。没有其他标签（您正在使用div）
对于位置使用css。

请检查以下答案是否有帮助。

$( document ).ready(function() { 
var new_task = "<div class='row'>row</div>";

$('#list').append(
 '<div class="spanish">\
<ul>\
    <li>'+new_task+'<div class="sub-row">Test</div></li>\
</ul>\
 </div>');
});

.row {
 display: inline;
clear:both:
widht:100%
}
.sub-row {
display:inline;
clear:both;
margin-left:2px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list"></div>

内联块不显示

3 个答案: