使自定义按钮的高度在圆的边框中相同：

布拉德拉尔

我正在创建一个圆，并且在其中有两个按钮，它们是圆的1/3

问题是，我无法正确设置按钮的高度以使其与父圆完美对齐。

HTML：

<div class="circle"> 
  <button class="button one"> Play </button>
  <button class="button two"> Pause </button>
</div>

CSS：

.circle {
  width: 300px;
  height: 300px;
  border: 10px solid black;
  border-radius: 100%;
  position: relative;
}

.button {
  position: absolute;
  width: 145px;
  height: 100px;
/*   I tried adding z-index to hide excess, but it is now unclickable */
/*   z-index: -1;  */
}

.one {
  bottom: 0;
  left: 5px;
  border-radius: 0 0 0 100%;
/*   trying to hide excess, by adding a black border */
/*   border-left: 5px solid black */
}

.two {
  bottom: 0;
  right: 5px;
  border-radius: 0 0 100%;
/*   trying to hide excess, by adding a black border*/
/*   border-right: 5px solid black; */
}

我尝试摆弄高度，.button但似乎无法完全对齐。

我还尝试添加不同的边框，px以隐藏重叠的边，但它并不是完全隐藏。

我的最终解决方案是添加z-index到.button它，并且可以工作！唯一的问题是我无法再单击该按钮。

我怎样才能使其完美？请帮忙

艾金·阿尔卡（Ekin Alcar）

你可以试试这个：我已经加入overflow:hidden到.circle并删除border-radius的按钮

.circle {
  width: 300px;
  height: 300px;
  border: 10px solid black;
  border-radius: 100%;
  position: relative;
  overflow:hidden;
}

.button {
  position: absolute;
  width: 140px;
  height: 100px;
}

.one {
  bottom: 0;
  left: 10px;
}

.two {
  bottom: 0;
  right: 10px;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。