私のナビゲーションバーのフレックスアイテムの幅を小さくしたい

Question

他のタブに影響を与えずにレビリンクの幅のサイズを小さくするには？

私がこれを望む理由は、leviと残りのリンクの間のスペースをクリックすると、leviリンクに接続されたページに移動するということです。リービリンクの幅が広すぎます。どのように私はそれを減らすのですか？

下の画像では、リーバイスはナビゲーションバーの広い領域に広がっています。私はそれを減らしたい。

Adjust the width of the preview to see the effect of the css declarations

これはこれは、CSS

 position: -webkit-sticky; 
     top : 1px;  
     width: 100%; 
    } 
    #flex-container, #nav { 

     font-size: 55px; 
     display: flex; 
     flex:1; 
    } 


    #navbutton { 
     text-transform: none; 
     font-size: 19px !important; 
     font-family: Heiti SC; 
    } 

    .nav-link { 
/*  display: inline;*/ 
     font-family: Helvetica neue; 
     cursor: pointer; 
     font-size: 19px; 
     padding: 10px; 
     font-weight: bolder; 
     margin:8px; 
    } 

    .md-display-2 { 
     font-family: Heiti SC; 
     font-size: 20px; 
    } 

    #container > .md-layout { 
/* background-color: #F9FBFB;*/ 
    min-height: 100px; 
    border-color: black; 
    align-items: center; 
    justify-content: center; 
/* border-style: dotted;*/ 
    border-width: 1px; 
    padding: 8px; 
margin-bottom: 100px; 
font-family: Heiti SC; 

} 

    footer { 
     margin-top: 100px ; 
    } 

    .btnsubscribe { 
     text-transform: none; 
     font-family: Heiti SC; 
     font-weight: bolder; 
     min-width: 66px !important; 
     min-height: 56px !important; 
     font-size: 19px !important; 
    } 

    .md-layout #inputSubscribe { 

    margin-left: 09px; 
    width: 300px; 
    } 

    .md-layout h3 { 
     padding: 0px; 
    } 

Answer 1

されるHTML

<md-whiteframe class = "main-toolbar "> 

    <md-theme name = "teal"> 

     <md-toolbar id = "flex-container"> 

    <router-link id = "nav" class = "nav-link " :to = " { name: 'levi' }" style = " text-decoration: none; color: #ffffff; background-color: red; ;   ">levi</router-link> 


    <router-link class = "nav-link" :to = "{ name: 'Product' }" style = " text-decoration: none; color: #ffffff; background-color: yellow;">Using levi</router-link> 

    <router-link class = "nav-link" :to = "{ name: 'Support' }" style = " text-decoration: none; color: #ffffff; background-color: green;"> Support </router-link> 

     <md-button class = "md-raised md-button"> 

      <router-link id = "navbutton" style = " text-decoration: none; color: #429bf4;" class = "nav-link" :to = "{ name: 'levi' }" > Create Account</router-link> 


</md-button> 

     </md-toolbar> 


    </md-theme> 

    </md-whiteframe> 

ある

与えられたとして divと変化するCSSのご router-linkを包みます

<div id="abc" style="text-decoration: none;color: rgb(255, 255, 255);background-color: red;" class="nav-link"> 
    <router-link id="nav" to="[object Object]">levi</router-link> 
</div> 

#flex-container, #abc{   
    font-size: 55px; 
    display: flex; 
    flex:1; 
} 

も.nav-linkにcursor: pointerを削除し、

router-link { cursor: pointer;}