顺风项目放置

Question

我使用顺风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

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

基本上，

从左到右：flex

• top to ：flex flex-col，从左到右：

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

抛开这个问题不谈，我注意到您的HTML中有一些自定义类。如果您没有通过CDN使用顺风，那么您应该尝试将额外的样式添加到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>

​