如何使用Markdig生成内联html？

Answer 1

如果

MarkupString

将输出块内容，则 HTML 标准不允许将此内容包装在

<span>

或

<p>

中。您可以使用

<div>

，它可以包含任何内容。

与

display:inline

 或 

display:inline-block

 相比，

Flexbox 通常是将多个（块）元素放置在一行上的更好、更灵活的方式。 CSS Tricks 有一个很好的教程。根据您的代码，这里有两种可能的变体：

<h2>DIV expands, X is at the top</h2>

<div style="display: flex; gap: 1em; flex-direction: row; flex-wrap: nowrap;">
    <div style="border:1px solid red; flex: 1 1 auto;">
        <h4>Random content here</h4>
        <p>Random content here</p>
        <div>Random content here</div>
    </div>

    <div style="border:1px solid red; flex: 0 0 auto;">
        X
    </div>
</div>

<h2>DIV does not expand, X is in the middle</h2>

<div style="display: flex; gap: 1em; flex-direction: row; flex-wrap: nowrap; align-items: center;">
    <div style="border:1px solid red; flex: 0 1 auto;">
        <h4>Random content here</h4>
        <p>Random content here</p>
        <div>Random content here</div>
    </div>

    <div style="border:1px solid red; flex: 0 0 auto;">
        X
    </div>
</div>