使用传单彼此之间的三个按钮答案

【问题标题】：Three buttons among each other using leaflet使用传单彼此之间的三个按钮
【发布时间】：2021-05-08 16:37:33
【问题描述】：

我要创建以下按钮面板。三个按钮应该在彼此的正下方，每个按钮应该有一个图像（I1，I2，I3），顶部和底部应该有一个半径，按钮之间应该有一条分隔线。按钮周围还应该有一个小的阴影效果。

但是现在我无法将按钮放置在彼此直接下方并填充具有一定响应大小的 DIV（按钮全 div 宽度和每个按钮的 DIV 高度的 1/3）。此外，我还无法在按钮之间插入分隔线。

    <div class="border rounded-lg border-1 border-white h-32 w-11 z-1000">
  <div class="border-white">
    <button
      class="block text-center h-1/3 w-full m-0 p-0 bg-gray-lighter z-1000"
    >
      <img class="items-center" src="~/assets/resize.png" />
    </button>
    <div class="divide-y-4 divide-yellow-600 divide-solid" />
    <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 class="divide-y-4 divide-red-dark divide-solid w-full" />
    <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

标签： html css button responsive tailwind-css

【解决方案1】：

您可以将 flexbox 与 flex-col 一起使用

<div class="flex flex-col bg-white rounded-lg shadow-md divide-y-2 divide-gray-200">
  <button class="w-12 h-12">l1</button>
  <button class="w-12 h-12">l2</button>
  <button class="w-12 h-12">l3</button>
</div>

https://play.tailwindcss.com/QPv7j1MCVD

【讨论】：

这对我来说效果最好！上帝祝福你！ ;) 也非常感谢所有其他 cmets :)

【解决方案2】：

在这里完成检查fiddle link

希望有效果

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

【讨论】：