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

我想减少导航栏中某个flex项的宽度

1 个答案: