css 当li中的内容出现在p标记下时，将其推到新行

omvjsjqw 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(118)

我有下面的html代码

<!DOCTYPE html>
<html>
<head>
<style>
.class-0-653 {
color : #231f20 ; 
font-size : 1.0rem ; 
line-height : 1.2em ; 
list-style-position : inside ; 
margin-left : 4.68% ; 
margin-right : 2.44% ; 
text-indent : 5.0% ; 
}

.class-0-651 {
text-align : justify ; 
}

.class-0-622 {
color : #231f20 ; 
font-size : 1.0rem ; 
}

</style>
</head>
<body>

<h1 style="background-color: red;">Hello World!</h1>
<p>This is a paragraph.</p>

<ol>
<li> Item 1 </li>
<li class="class-0-653" id="id-0-645"><p class="class-0-651" id="id-0-646"><span class="class-0-622" id="id-0-647"> Item 2 </span> </p> </li>
</ol>

</body>
</html>

如果你运行这个html，Item2内容将从<li>标记下开始，并在一个新的行中。我希望它出现在标记旁边，就像任何普通的列表一样。我在chrome inspect窗口中尝试了各种组合，关闭list-style-position解决了这个问题。同样，如果我将更改为，或者如果我完全删除，此问题已修复。我不了解标记对内容放置的影响。有人能帮助我了解吗

css

来源：https://stackoverflow.com/questions/75095318/content-in-li-is-pushed-to-new-line-when-present-under-p-tag

1条答案

按热度按时间

u5i3ibmn1#

默认情况下，p是block元素，根据MDN Docs：
默认情况下，块级元素从新行开始，但行内元素可以从行中的任何位置开始。
使用CSS，可以将标记的默认属性从block更改为inline：

.class-0-651 {
      text-align : justify ;
      display: inline;   /* new */
}

赞(0）回复(0）举报 2023-01-14

我来回答

css 当li中的内容出现在p标记下时，将其推到新行

1条答案

相关问题

热门标签

最新问答