当视口变小并且菜单项被推到下一行时，我试图阻止我的菜单重叠。看起来像一个简单的问题，但我花了几个小时才解决这个问题。
nav {
position: absolute;
width: 100%;
text-align: center;
}
nav li {
display: inline-block;
}
nav a {
text-decoration: none;
padding: 1em;
margin: 1em;
border: 2px solid black;
}<body>
<header>
<nav>
<ul>
<li><a href="#">NavItem</a>
</li>
<li><a href="#">NavItem</a>
</li>
<li><a href="#">NavItem</a>
</li>
<li><a href="#">NavItem</a>
</li>
<li><a href="#">NavItem</a>
</li>
</ul>
</nav>
</header>
</body>
现在收缩窗口并且所有项目都重叠。
答案 0 :(得分：1)
将[...]
describe('AddStoreController', function(){
beforeEach(function(){
var NgMap, appConfig;
module(function ($provide) {
$provide.value('NgMap',{
getMap: function () {
return {
then: function () {
}
};
}
});
$provide.value('appConfig',{
gmapsKey : 'asdasd'
});
return null;
});
});
beforeEach(function(){
inject(function ($controller, _$rootScope_, _StoresService_,_NgMap_,_appConfig_) {
rootScope = _$rootScope_;
scope = _$rootScope_.$new();
NgMap = _NgMap_;
appConfig = _appConfig_;
StoresService = _StoresService_;
createController = function () {
return $controller("AddStoreController", {
$scope: scope,
});
};
});
});
it('should call getCompanies', function(){
spyOn(StoresService, 'getCompanies').and.callThrough();
createController();
expect(StoresService.getCompanies).toHaveBeenCalled();
})
});
更改为nav a{}：
nav li{}请参阅JSFiddle。
答案 1 :(得分：0)
这是因为a是一个内联元素。所以
a设置为display:block
nav {
position: absolute;
width: 100%;
text-align: center;
}
nav li {
display: inline-block;
}
nav a {
text-decoration: none;
padding: 1em;
margin: 1em;
border: 2px solid black;
display:block
}<body>
<header>
<nav>
<ul>
<li><a href="#">NavItem</a>
</li>
<li><a href="#">NavItem</a>
</li>
<li><a href="#">NavItem</a>
</li>
<li><a href="#">NavItem</a>
</li>
<li><a href="#">NavItem</a>
</li>
</ul>
</nav>
</header>
</body>
li。
nav {
position: absolute;
width: 100%;
text-align: center;
}
nav li {
text-decoration: none;
padding: 1em;
margin: 1em;
border: 2px solid black;
display: inline-block;
}<body>
<header>
<nav>
<ul>
<li><a href="#">NavItem</a>
</li>
<li><a href="#">NavItem</a>
</li>
<li><a href="#">NavItem</a>
</li>
<li><a href="#">NavItem</a>
</li>
<li><a href="#">NavItem</a>
</li>
</ul>
</nav>
</header>
</body>
这取决于您的需求，以及如何创建菜单/子菜单的其余部分。