如何根据内容设置元素的高度

Question

设置元素高度时出现问题。我需要单击可点击的点，但是我也可以单击元素的不可见高度。我尝试设置max-height，但是它将第一个元素移出他的范围。这是我的例子

nav {
  position: fixed;
  color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  right: 5px;
}

nav>div {
  min-height: 10px;
  font-size: 3em;
  cursor: pointer;
}

<nav>
  <div>
    •
  </div>
  <div>
    •
  </div>
  <div>
    •
  </div>
  <div>
    •
  </div>
</nav>

Answer 1

我建议使用其他方法：

将点设置为div，并设置其宽度，高度，背景色和50％的border-radius（使其成为圆圈）。使用顶部和底部边距创建垂直距离：

nav {
  position: fixed;
  color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  right: 5px;
}

nav>div {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #000;
  margin: 30px 0;
  cursor: pointer;
}

<nav>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</nav>