我想在导航栏中减小我的弹性项目之一的宽度

Question

如何在不影响其他选项卡的情况下减小我的 levi 链接的宽度？

我想要这样做的原因是，当我点击 levi 和其余链接之间的空间时，它会转到连接到 levi 链接的页面。 levi 链接的宽度太宽。我该如何减少它？

在下图中，levi 跨越了导航栏的大部分区域。我想减少它。

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

这是 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>

这是 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

将您的 router-link 包装在 div 中并按照给定的方式更改 css

<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;
}

也将cursor: pointer 删除为.nav-link 并将其提供给

router-link { cursor: pointer;}