我在div内部的href不工作我看到宽度和高度是0px,所以我试图增加大小,但它不会增加。 每个点都应该发送到我正在制作的单页滚动条中的另一个页面
.dotstyle-scaleup{
float: right;
margin-right: 3%;
}
.dotstyle-scaleup li{
background-color: #eeeeee;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 80px 0 0 0;
list-style: none;
}
.dotstyle-scaleup #current1{
background-color: #54a59f;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 80px 0 0 0;
list-style: none;
}
<div id="wrapper">
<!-- Landings -->
<div class="section" data-anchor="page1" style="background-color: red">
<div class="dotstyle-scaleup">
<ul>
<li id="current1"><a href="#page1"></a></li>
<li><a href="#page2"></a></li>
<li><a href="#page3"></a></li>
<li><a href="#page4"></a></li>
<li><a href="#page5"></a></li>
</ul>
</div>
</div>
答案 0 :(得分:0)
由于相关元素不包含任何内容,因此声明height
和width
属性是不够的。
除了为嵌套的锚元素(display
)指定height
和width
属性之外,请考虑声明a
属性,例如:
.dotstyle-scaleup li a {
width: 100%;
height: 100%;
display: block;
}
代码段示范:
.dotstyle-scaleup {
float: right;
margin-right: 3%;
}
.dotstyle-scaleup li {
background-color: #eeeeee;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 80px 0 0 0;
list-style: none;
}
.dotstyle-scaleup #current1 {
background-color: #54a59f;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 80px 0 0 0;
list-style: none;
}
/* Additional */
.dotstyle-scaleup li a {
width: 100%;
height: 100%;
display: block;
}
<div id="wrapper">
<!-- Landings -->
<div class="section" data-anchor="page1" style="background-color: red">
<div class="dotstyle-scaleup">
<ul>
<li id="current1">
<a href="#page1"></a>
</li>
<li>
<a href="#page2"></a>
</li>
<li>
<a href="#page3"></a>
</li>
<li>
<a href="#page4"></a>
</li>
<li>
<a href="#page5"></a>
</li>
</ul>
</div>
</div>