Html 三个按钮之间相互使用传单

我将创建以下按钮面板。 三个按钮应直接位于彼此下方，每个按钮应有一个图像（I1、I2、I3），顶部和底部应有一个半径，按钮之间应有一条分隔线。按钮周围也应该有一个小阴影效果

但现在我有问题的地方，他们在一个按钮的方式，他们是直接低于对方，并填补了一个DIV有一定的响应大小（按钮全DIV宽度和每个按钮1/3的DIV高度）。此外，我还无法在按钮之间插入分隔线

到目前为止，我的代码是：

+
-

很高兴有人帮忙

您可以将flexbox与

l1
l2
l3

完成检查这里

希望它能起作用

<div class="border-white" style="">
        <div class="divide-y-4 divide-yellow-600 divide-solid" style="
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;">
        <button class="block text-center h-1/3 w-full m-0 p-0 bg-gray-lighter z-1000">
          <span class="text-red-dark">$</span>
        </button><hr style="
    border: 2px solid black;
    width: 70px;
    border-radius: 40px;
    margin: 0 auto;
">
<button class="block text-center h-1/3 w-full m-0 p-0 bg-gray-lighter z-1000">
          <span class="text-red-dark">+</span>
        </button>
<hr style="
    border: 2px solid black;
    width: 70px;
    border-radius: 40px;
    margin: 0 auto;
">
        <button class="block text-center h-1/3 w-full m-0 p-0 bg-gray-lighter z-1000">
          <span class="text-red-dark">-</span>
        </button>
    </div>
    </div>

$

+

-

尝试使用

flexbox

这对我最有效！上帝保佑你非常感谢所有其他评论：）

<div class="border-white" style="">
        <div class="divide-y-4 divide-yellow-600 divide-solid" style="
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;">
        <button class="block text-center h-1/3 w-full m-0 p-0 bg-gray-lighter z-1000">
          <span class="text-red-dark">$</span>
        </button><hr style="
    border: 2px solid black;
    width: 70px;
    border-radius: 40px;
    margin: 0 auto;
">
<button class="block text-center h-1/3 w-full m-0 p-0 bg-gray-lighter z-1000">
          <span class="text-red-dark">+</span>
        </button>
<hr style="
    border: 2px solid black;
    width: 70px;
    border-radius: 40px;
    margin: 0 auto;
">
        <button class="block text-center h-1/3 w-full m-0 p-0 bg-gray-lighter z-1000">
          <span class="text-red-dark">-</span>
        </button>
    </div>
    </div>