如何在不影响其他选项卡的情况下减小我的 levi 链接的宽度?
我想要这样做的原因是,当我单击 levi 和其余链接之间的空间时,它会转到连接到 levi 链接的页面。levi 链接的宽度太宽。我该如何减少它?
在下图中,Levi 跨越了导航栏的大部分区域。我想减少它。
这是 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;
}