当屏幕达到特定大小时，我的侧边导航栏不断与页面上的主要内容重叠Svelte/Sapper

问题描述

好的，这就是问题所在：

这是我的布局文件，所有内容都汇集在一起​​：

<script>
    import Nav from '../components/Nav.svelte';
    import Menu from '../components/Menu.svelte'
    export let segment;
</script>

<style>
    main {
        position: relative;
        max-width: 56em;
        background-color: white;
        padding: 2em;
        margin: 0 auto;
        Box-sizing: border-Box;
    }

</style>

<Nav {segment}/>
<Menu {segment}/>
<main>
    <slot></slot>
</main>

侧边栏的 svelte/html/css：

<script>
    let expanded = false
    
    // const toggleExpanded =
    //      _ => expanded = !expanded
    export let segment;
</script>

<nav>

    
    <ul class="essential">
        <li>? <span>InBox</span></li>
            <ul class = "sub">
                <li class ="sub_item">? <span>InBox</span></li>
                <li class ="sub_item">? <span>InBox</span></li>
            </ul>
        <li>? <span>Starred</span></li>
        <li>? <span>Trashed</span>
            <ul class = "sub">
                <li class ="sub_item">? <span>InBox</span></li>
                <li class ="sub_item">? <span>InBox</span></li>
            </ul>
        </li>
        <li>? <span>Starred</span></li>
    </ul>

</nav>

<style>
    nav {
        height: 100%;
        left:0;
        color: #A2B7C4;
        width: 17.5rem;
        border-right: 1px solid rgba(255,62,0.1);
        position: fixed;
    }
    
    ul {
        list-style: none;
        padding: 20px;
        margin: 0;
    }
    
    li {
        width: 200px;
    }
    ul.sub{
        color: red;
        padding: 5px 0 0 13px;
    }
    span{
        margin:0 0 0 5px;
    }
</style>

如果有任何改变，我也在我的框架中使用 sapper/svelte。我试过在侧边栏 css 中添加一个 float: left 但它仍然给我相同的结果。如果我遗漏了什么，请告诉我。谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）