顺风物品放置

Question

我正在使用tailwind css 来创建这个页面。但我无法获得表格上方的标题和表格下方的按钮。谁能帮帮我？

我已经附上了它的外观图片以及我想要放置标题和按钮的位置。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-row items-center justify-center">
  <P class="font-bold flex flex-initial">Sms Template:</P>
  <div class="min-h-screen flex items-center justify-center">

    <div class="firstbox border border-black">
      <div class="mx-11 my-10 px-10">
        <p class="py-2 text-lg font-semibold">Message For:</p>
        <select class="firstbox_select text-center" name="message" id="message">
          <option selected disabled>Invoice</option>
        </select>
      </div>
      <div class="mx-11 my-20 px-10">
        <P class="py-4 text-lg font-semibold">Available parameters</P>
        <table class="table auto text-center">
          <tbody>
            <tr>
              <td class="border border-black tb px-4">Client Full name</td>
              <td class="border border-black tb px-4">[fullname]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">Invoice ID</td>
              <td class="border border-black tb px-4">[invoice_id]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">Invoice Date</td>
              <td class="border border-black tb px-4">[invoice_date]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">....</td>
              <td class="border border-black tb px-4"></td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">....</td>
              <td class="border border-black tb px-4"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div>
    <input type="submit" value="Log In" class="w-full py-3 mt-6 font-medium tracking-widest text-white uppercase bg-gray-700 shadow-lg focus:bg-gray-600">
  </div>
</div>

Answer 1

正如其中一个 cmets 所指出的，您需要在顶层 div 将 flex-row 切换为 flex-col 以应用 flex-direction: column 的样式。

基本上，

• 从左到右：flex
• 从上到下：flex flex-col

您也可以只使用flex 而不是在需要行对齐时指定flex flex-row。似乎您可能已经知道这一点，因为在第二个 div 中您只需指定 flex。

除了这个问题，我注意到您的 HTML 中有一些自定义类。如果您没有通过 CDN 使用 tailwind，您应该尝试将其他样式添加到 tailwind.config.js 文件中，以便您的所有样式都在标记中。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col items-center justify-center">
  <P class="font-bold flex flex-initial">Sms Template:</P>
  <div class="flex items-center justify-center">

    <div class="firstbox border border-black">
      <div class="mx-11 my-10 px-10">
        <p class="py-2 text-lg font-semibold">Message For:</p>
        <select class="firstbox_select text-center" name="message" id="message">
          <option selected disabled>Invoice</option>
        </select>
      </div>
      <div class="mx-11 my-20 px-10">
        <P class="py-4 text-lg font-semibold">Available parameters</P>
        <table class="table auto text-center">
          <tbody>
            <tr>
              <td class="border border-black tb px-4">Client Full name</td>
              <td class="border border-black tb px-4">[fullname]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">Invoice ID</td>
              <td class="border border-black tb px-4">[invoice_id]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">Invoice Date</td>
              <td class="border border-black tb px-4">[invoice_date]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">....</td>
              <td class="border border-black tb px-4"></td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">....</td>
              <td class="border border-black tb px-4"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div>
    <input type="submit" value="Log In" class="w-full py-3 mt-6 font-medium tracking-widest text-white uppercase bg-gray-700 shadow-lg focus:bg-gray-600">
  </div>
</div>