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

Question

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

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

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

很高兴有任何帮助！

Answer 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

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

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

Three buttons among each other using leaflet

html

css

button

responsive

tailwind-css