无法弄清楚为什么 <span> 跳到下一行（苗条 material ui）

Question

<FormField style="display: inline;">
    <Checkbox />
    <span slot="label">test</span>
</FormField>


<script lang="ts">
    import FormField from '@smui/form-field';
    import Checkbox from '@smui/checkbox';
</script>

我正在尝试创建旁边带有标签的复选框列表，但标签跳到下一行。我真的想不通为什么。

内联不应该处理这个问题吗？

我正在使用 svelte material ui 顺便说一句。

Answer 1

display:inline 不应该在 <Formfield> 上，它需要在两个兄弟元素上（通常是您的复选框和跨度）。

但是您的复选框不是 <input type="checkbox" /> 元素，它是一个组件。因此，您必须检查组件内部并查看其中的代码。也许复选框被 div 包围着？输出到 DOM 的内容（使用 DevTools F12 检查呈现的内容 html）

一个解决方案是在 <Formfield> 元素上使用 flexbox。尝试使用 display:flex 而不是 display:inline——仅此一项就可以解决您的问题。

快速 flexbox 信息的一些有用链接：

https://yoksel.github.io/flex-cheatsheet/

https://www.youtube.com/watch?v=k32voqQhODc

Answer 2

您可能忘记为 material ui 组件导入 css 文件。您需要为它们中的每一个导入 css 个文件。

import '@smui/checkbox/bare.css'
import '@smui/form-field/bare.css'
...

将这些行添加到 <script> 标记内的顶级组件，因此这些 css 样式将在所有嵌套组件中可用。不过，我不确定是否有办法一次导入所有 css 个文件。

无法弄清楚为什么 <span> 跳到下一行（苗条 material ui）

Can't figure out why <span> jumps to next line (svelte material ui)

html

css

svelte