导航栏:三 Angular 形的位置和背景颜色(CSS)
好的,我正在尝试创建一个导航,如页面底部的图像所示。我怎样才能达到那个结果?非常感谢。
* {
margin: 0;
padding: 0;
}
nav {
height: 100%;
width: 100%;
background-color: yellow;
}
li {
display: block;
border-bottom: 1px solid grey;
line-height: 50px;
}
a {
text-decoration: none;
}
.dropdown {
display: none;
}
.label {
border: solid blue;
border-width: 0 3px 3px 0;
padding: 3px;
transform: rotate(45deg);
position: relative;
display: inline-block;
float: right;
margin: 1px;
}
@media all and (min-width: 800px) {
li {
display: inline-block;
border-bottom: none;
}
}
<nav>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a>
<input type="checkbox" id="dd-1" class="dropdown" />
<label for="dd-1" class="label"></label>
</li>
<li><a href="#">Page 3</a>
<input type="checkbox" id="dd-2" class="dropdown" />
<label for="dd-2" class="label"></label>
</li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a>
<input type="checkbox" id="dd-3" class="dropdown" />
<label for="dd-3" class="label"></label>
</li>
</ul>
</nav>
最佳答案
基于您当前的代码库,您可以申请 position: relative
至 <li>
和 position: absolute
至 <label>
实现这一目标。另外,您需要定位您的 <label>
使用 right: 2.5%
用于水平定位和top: 50%;
与 transform: translateY (-125%);
用于垂直居中。
* {
margin: 0;
padding: 0;
}
nav {
height: 100%;
width: 100%;
background-color: yellow;
}
li {
display: block;
border-bottom: 1px solid grey;
line-height: 50px;
position: relative;
padding-left: 1%;
padding-right: 1%;
}
a {
text-decoration: none;
}
.dropdown {
display: none;
}
.label {
border: solid blue;
border-width: 0 3px 3px 0;
padding: 3px;
transform: rotate(45deg) translateY(-125%);
position: absolute;
display: inline-block;
top: 50%;
right: 2.5%;
margin: 1px;
}
@media all and (min-width: 800px) {
li {
display: inline-block;
border-bottom: none;
}
}
<nav>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a>
<input type="checkbox" id="dd-1" class="dropdown" />
<label for="dd-1" class="label"></label>
</li>
<li><a href="#">Page 3</a>
<input type="checkbox" id="dd-2" class="dropdown" />
<label for="dd-2" class="label"></label>
</li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a>
<input type="checkbox" id="dd-3" class="dropdown" />
<label for="dd-3" class="label"></label>
</li>
</ul>
</nav>
关于html - Navbar:三 Angular 形的位置和背景颜色(CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43711774/