html - 我想减少导航栏中一个 flex 元素的宽度

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