如何删除空 space？

Question

[右侧导航有多余的space 还是右侧有浮动列表？][1]

我想把 Lists 放在右边，但是导航栏里 space 是空的，我怎样才能把它去掉？

我需要一些 space 来放置 png Images logo

有我的代码

（链接图片 Styling/Header 列出块引用代码 HTML 表）

<template>
  <header>
      <nav class="container">
          <div class="left-nav">
              <ul>
                  <li><router-link class="display" to="#"><font-awesome-icon icon="display" /></router-link></li>
                  <li><router-link class="download" to="#"><font-awesome-icon icon="download" /></router-link></li>          
              </ul>
             
          </div>
         
         
          
          <div class="right-nav">
              <ul>
                  <li><router-link class="link" to="#"><font-awesome-icon icon="table-list" /></router-link></li>
                  <li><router-link class="link" to="#"><font-awesome-icon icon="bell" /></router-link></li>       
                  <li><router-link class="link" to="#"><font-awesome-icon icon="magnifying-glass" /></router-link></li>       
                  <li><router-link class="link" to="#"><font-awesome-icon icon="bars" /></router-link></li>                  
              </ul>
          </div>
          
      </nav>

      
  </header>
</template>

<script>

export default {
    name:'Home',
    components:{
        
    }
}
</script>

<style scoped lang="scss">
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Nanum Gothic', sans-serif;  
}

header{
    background-color:#303135;    
    z-index:99;
  
    nav{
      display:flex;      
      padding:2% 8% 3% 8%;

      .left-nav{
          display: flex;
          align-items: center;  
          flex:1 auto;   
             
          
        ul{  
          display:flex;
          width:100%; 
          
          li{
              padding:0 3%;
              list-style:none;

              .display{
                color:#fff;            
              }

              .download{
                color:#324B57;           
              }
            }
          
          
        }
      }

      .right-nav{
          position:relative;
          display:flex;          
          align-items: center;         
          justify-content: flex-end;          
          flex-basis:20%; 
          flex:1 auto;   
          
         ul{             
            display:flex; 
            margin-right:10%;
            min-width: 0;
            white-space: nowrap;

            li{
              padding:0 10%;
              list-style:none;
               .link{
                color:#fff;              
              }
            }
            
            

        }
      }

     
      
    }

}

</style>

Answer 1

这使得 .right-nav 填补了空白 space。

  .right-nav {
    flex:1;
  }

如果我理解正确，你需要将该行移至 .left-nav

  .left-nav {
    flex:1;
  }

通过移动它，您将.left-nav向右推.right-nav。通常，您键入 flex: 1 1 auto 会有一个弹性项目来填充任何空的 space。

如何删除空 space？

How can I remove empty space?

css

frontend