我想减少导航栏中一个弹性项目的宽度

Question

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

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

在下图中，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;}

我想减少导航栏中一个弹性项目的宽度

I want to reduce the width of one of my flex-items in my navigation bar

html

css

vuejs2

vue-material