登录  /  注册
Taildwind css 底部对齐
P粉343408929
P粉343408929 2024-02-04 11:06:37
[CSS3讨论组]

您好,我只是尝试发送到其父级的底部:

<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="Photo's Title" [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="Photo's Description" [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)">
                    Delete
                </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 ">
                    Update
                </button>
            </div>
        </div>
 </form>

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

您可以看到按钮已弹起,出了什么问题?为什么

P粉343408929
P粉343408929

全部回复(1)
P粉938936304

只需在外部容器上使用网格即可正常工作。还有很多机会可以简化标记和类。

<script src="https://cdn.tailwindcss.com"></script>

<div class="m-4 grid max-w-4xl grid-cols-2 gap-3 rounded border p-4 shadow">
  <img class="w-full" src="https://picsum.photos/id/237/900" />
  <form class="flex flex-col" (submit)="updatePhoto(title, description)">
    <input type="text" class="focus:shadow-outline mb-4 w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none" placeholder="Photo's Title" [value]="photo.title" #title />
    <textarea rows="2" class="focus:shadow-outline w-full resize-none appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none" placeholder="Photo's Description" [value]="photo.description" #description></textarea>
    <div class="ml-auto mt-auto">
      <button class="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" (click)="deletePhoto(photo._id)">Delete</button>
      <button class="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">Update</button>
    </div>
  </form>
</div>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号