Tailwind CSS对齐底部

huangapple go评论58阅读模式
英文:

Taildwind css align bottom

问题

你好,我只会返回已翻译的内容,不回答问题。以下是您要翻译的内容:

Hello,我只是尝试将它发送到其父元素的底部:

<form class="flex flex-col w-full" (submit)="updatePhoto(title, description)">
    <div class="w-full block">
        <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="照片标题" [value]="photo.title" #title>
    </div>
    <div class="my-4 w-full">
        <textarea rows="2" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline resize-none" placeholder="照片描述" [value]="photo.description" #description></textarea>
    </div>
    <div class="grid justify-items-end  mt-auto  border ">
        <div>
            <button class="text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2" (click)="deletePhoto(photo._id)">
                删除
            </button>
            <button class="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 ">
                更新
            </button>
        </div>
    </div>
</form>

所以我想将元素(按钮)对齐到其父元素的底部,我在父元素中使用了 "flex flex-col",在子元素中使用了 "grid justify-items-end mt-auto",但不起作用,所以我只是添加了 "border" 以查看位置,我得到了这个:

[![点击此处输入图像描述][1]][1]

你可以看到按钮在上面,是什么问题?为什么?

请注意,这只是提供的翻译。如果您需要进一步的帮助或解决问题,请提出具体的问题描述。

英文:

Hello I just tring send to bottom of its parent:

 &lt;form class=&quot;flex flex-col w-full&quot; (submit)=&quot;updatePhoto(title, description)&quot;&gt;
        &lt;div class=&quot;w-full block&quot;&gt;
            &lt;input type=&quot;text&quot; class=&quot;shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline&quot; placeholder=&quot;Photo&#39;s Title&quot; [value]=&quot;photo.title&quot; #title&gt;
        &lt;/div&gt;
        &lt;div class=&quot;my-4 w-full&quot;&gt;
            &lt;textarea rows=&quot;2&quot; class=&quot;shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline resize-none&quot; placeholder=&quot;Photo&#39;s Description&quot; [value]=&quot;photo.description&quot; #description&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class=&quot;grid justify-items-end  mt-auto  border &quot;&gt;
            &lt;div&gt;
                &lt;button class=&quot;text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2&quot; (click)=&quot;deletePhoto(photo._id)&quot;&gt;
                    Delete
                &lt;/button&gt;
                &lt;button class=&quot;text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 &quot;&gt;
                    Update
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
 &lt;/form&gt;

so I want align element(buttons) to the bottom of its parent, I'm using flex flex-col in parent and child I'm using grid justify-items-end mt-auto but don't work, so I just added border to see the position, I'm getting this:

Tailwind CSS对齐底部

you can see the buttons are up, what's wrong? why

答案1

得分: 1

它在外部容器上使用网格时效果很好。在简化标记和类的同时,也有很多优化的机会。

英文:

It works fine just use grid on the outer container. There's also a lot of opportunity to streamline both the markup and the classes.

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

&lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;m-4 grid max-w-4xl grid-cols-2 gap-3 rounded border p-4 shadow&quot;&gt;
  &lt;img class=&quot;w-full&quot; src=&quot;https://picsum.photos/id/237/900&quot; /&gt;
  &lt;form class=&quot;flex flex-col&quot; (submit)=&quot;updatePhoto(title, description)&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;focus:shadow-outline mb-4 w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none&quot; placeholder=&quot;Photo&#39;s Title&quot; [value]=&quot;photo.title&quot; #title /&gt;
    &lt;textarea rows=&quot;2&quot; class=&quot;focus:shadow-outline w-full resize-none appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none&quot; placeholder=&quot;Photo&#39;s Description&quot; [value]=&quot;photo.description&quot; #description&gt;&lt;/textarea&gt;
    &lt;div class=&quot;ml-auto mt-auto&quot;&gt;
      &lt;button class=&quot;mb-2 mr-2 rounded-lg bg-gradient-to-r from-red-400 via-red-500 to-red-600 px-5 py-2.5 text-center text-sm font-medium text-white shadow-lg shadow-red-500/50 hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-red-300 dark:shadow-lg dark:shadow-red-800/80 dark:focus:ring-red-800&quot; (click)=&quot;deletePhoto(photo._id)&quot;&gt;Delete&lt;/button&gt;
      &lt;button class=&quot;mb-2 mr-2 rounded-lg bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white shadow-lg shadow-blue-500/50 hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-blue-300 dark:shadow-lg dark:shadow-blue-800/80 dark:focus:ring-blue-800&quot;&gt;Update&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月2日 00:02:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76383773.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定