href无法正常工作且未调整大小

Question

我在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>

Answer 1

由于相关元素不包含任何内容，因此声明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>