我已经声明了在css的Body标签中显示是内联的，但浏览器呈现仍然是以块方式进行的，请帮助我理解这个概念
我将display:inline应用于li标记，这是有效的(通过以内联方式显示)，但为什么内联不适用于正文标记，这是我的问题吗？
``
<style>
body {
display: inline;
}
</style>
<body>
<ul>
<li>
1234
</li>
<li>
5678
</li>
</ul>
</body>
``
display在元素will not上设置display会使其子代继承值:
.wrapper {display: inline}<div class="wrapper">
<div>First text.</div>
<div>Second text.</div>
</div>虽然您可以声明元素从其祖先继承display，但I do not recommend这(通常)是:
display的元素需要的声明与声明特定的display值一样多.为您的用例 Select 好的 Select 器是很重要的.对于您的简短示例，可以有一个通用 Select 器，比如body *(换句话说:"所有BODY的后代")，它使用universal selector *和descendant combinator .
Note:使用组合器通常 Select not本身的"子 Select "，例如将 Select not个 Select 器body *中的BODY个.还要注意，后代组合符没有child combinator >那么具体.
下面是一个类似的例子:
.wrapper * {display: inline}<div class="wrapper">
<div>First text.</div>
<div>Second text.</div>
</div>但是，如果您仍然希望将元素声明为inherit display，下面是一个示例:
.wrapper {display: inline} /*Set the value to inherit*/
.wrapper * {display: inherit}<div class="wrapper">
<div>First text.</div>
<div>Second text.</div>
</div>display列表的默认display值为block，其子列表的值
(LI)是list-item.如果您只是想go 掉标记，请声明列表list-style-type: none:
ul {list-style-type: none}<ul>
<li>First item.
<li>Second item.
</ul>但您也可以将该列表及其子列表(ul, ul>*)声明为display: inline.请注意，删除填充需要另一个声明.
ul, ul>* {display: inline}<ul>
<li>First item.
<li>Second item.
</ul>如果要使用标记内联列表项，有几种可能性:
您可以通过声明list as display: inline-flex来保留::marker个内联列表项.
默认情况下，Sidenote:个::marker是列表项的principal box，这意味着它们可以遮挡其他框的视线.将列表(或其项)声明为list-style-position: inside，以将标记保留在列表项的框中，以防止此类溢出.
Note flex-wrap: nowrap是其默认设置，这与常规文本流不同.使用flex-wrap: wrap可使列表项(及其内容)像普通文本一样排列:
// Ignore; for handling radio inputs
const form = document.querySelector("form");
const list = document.querySelector("ol");
form.addEventListener("input", evt => {
const className = evt.target.name === "position" ? "inside" : "wrap";
// Classes for applying non-default values are named after the values
const state = evt.target.value === className;
list.classList.toggle(className, state);
});ol {display: inline-flex}
.inside {list-style-position: inside}
.wrap {flex-wrap: wrap}
/*Ignore; for presentational purposes*/
ol {margin: 0; padding: 0}
li {border: 1px solid darkgray}
section {margin-block: 1.2rem}<form>
<div>
List type:
<label for="i-outside">
<input id="i-outside" name="position" type="radio" value="outside" checked> Outside
</label>
<label for="i-inside">
<input id="i-inside" name="position" type="radio" value="inside"> Inside
</label>
</div>
<div>
Wrapping:
<label for="i-nowrap">
<input id="i-nowrap" name="wrap" type="radio" value="nowrap" checked> No-wrap
</label>
<label for="i-wrap">
<input id="i-wrap" name="wrap" type="radio" value="wrap"> Wrap
</label>
</div>
</form>
<ol>
<li>A very long named item that hopefully overflows its box, and
<li>An item, and
<li>Another short item, and
<li>another very long named item that too should overflow its box.
</ol>你也可以通过::before-pseudo-element使用定制的"标记".
Sidenote:使用custom-styled CSS counter，您可以重新创建例如list-style-type: georgian个计数器:
ol {counter-reset: li-counter}
li {counter-increment: li-counter}
li::before {content: counter(li-counter)". "}
/*Ignore; for presentational purposes*/
ol, li {padding: 0; display: inline}A list consisting of
<ol>
<li>one item and
<li>another item.
</ol>display?你问为什么以下几个因素没有导致LI继承BODY的display值:
body {display: inline}
li {display: inherit}<body>
<ul>
<li>First item.
<li>Second item.
</ul>
</body>这是因为，虽然BODY is声明为display: inline，但介于两者之间的列表的缺省值为display，即block.因为继承是从元素的直接祖先发生的，所以列表项将继承列表中的值block.
列表是语义元素，默认情况下由浏览器解释为语义元素.但改变它们的样式可能会改变浏览器解释它们的方式，潜在地将它们的语义降低到包含文本的通用元素.
因此，通过将列表及其项分别经由ARIA-attribute、role声明为list和listitem来确保列表被解释为列表通常是很好的.这overrules浏览器决定将元素解释为列表，即使浏览器会因为某些CSS而决定不将其解释为列表.
另一点是，从技术上讲，伪元素(例如::marker、::before)不是文档的一部分，因此不能与其交互(例如selecting or copying).如果您需要将它们作为文档的一部分，则可以直接将它们包含在文档中.