我正在使用Angular 4,Bootstrap 4 alpha 6(css(。我正在尝试使每个<li>
的宽度相等(而不是导航栏的 100%(。我试图使用弹性盒,但我无法让它使它们都相等。
我已经尝试了几种方法,但每次项目都是固定宽度,但宽度不同。
这是我正在尝试做的事情的一个例子
[ ---项目1--- | ---项目2--- | ---项目3--- ]
.HTML
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ng-container *ngIf="isLoggedIn">
<span class="navbar-text"> </span>
<ul class="nav navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="profileDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
My Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item">My Account</a>
<a class="dropdown-item">My Account</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="accountDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Profile
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" [routerLink]="['/profile', 'view']">My Account</a>
<a class="dropdown-item" [routerLink]="['/profile']">Edit my Profile</a>
</div>
</li>
</ul>
</ul>
</div>
</nav>
.CSS
nav ul{
list-style: none;
margin: 0 2px;
padding: 0;
display: flex;
justify-content: space-around;
}
nav li{
width: 100%
}
.nav.navbar-nav > li{
border-right: 2px solid white;
}
编辑:这有效,但我更喜欢使用 flex 以便它自动完成
.nav.navbar-nav > li{
border-right: 2px solid white;
width: 200px;
max-width: 200px;
text-align: center;
}
我尝试过的其他方法
1(
.navbar ul.nav {
!*margin: 0;*!
display: table;
width: 100%;
!*direction: rtl;*!
table-layout: fixed;
margin:0;
padding:0;
}
.navbar ul.nav li {
!*float: right;*!
display: table-cell;
width: 20%;
!*float: none;*!
text-align: center;
!*direction: rtl;*!
}
.navbar .nav > li:hover {
background-color: #808080
}
.navbar .nav li:first-child a {
!*border-left: 0;*!
!*border-radius: 3px 0 0 3px;*!
}
.nav.navbar-nav > li{
!*width: 10%;*!
border-right: 2px solid white;
}
2(
nav {
text-align: center;
margin: 20px 0 0 ;
padding: 10px 0;
}
nav ul{
list-style: none;
margin: 0 2px;
padding: 0;
}
nav li {
display: inline-block;
padding: 5px 5px;
}
nav a {
font-weight: normal;
padding: 10px 5px;
}
使用calc()
基本上,通过将 100% 宽度除以 3,每个 li 的宽度将是 1/3。接下来,您可以将每个"a"设置为100%(宽度将是父级的100%(并显示:内联块(以便宽度生效。
nav li{
width: calc(100% / 3);
}
我真的不明白如何在不给<nav>
某种宽度的情况下让它们具有相同的大小。 但是,如果您确实为其指定了宽度,则可以使用 display: table;
和 display: table-cell
的组合使所有子元素的宽度相同。 这是没有句法承诺的<table>
的所有细节。
nav {
width: 50%;
position: relative;
}
nav ul {
display: table;
padding: 0;
margin: 0;
width: 100%;
}
nav ul li {
text-align: center;
display: table-cell;
border: 1px solid black;
}
<nav>
<ul>
<li>Fizz</li>
<li>Buzz</li>
<li>Foo</li>
</ul>
</nav>