英文:
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:
<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>
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:
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 -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论