gpt4 book ai didi

html - 无论内容长度如何,旋转并将元素齐平放置到父元素的边缘

转载 作者:太空宇宙 更新时间:2023-11-04 06:55:04 25 4
gpt4 key购买 nike

标签如何在旋转时始终与容器的右侧齐平并且具有未知宽度的子文本?

.tab 上没有旋转 right: 0; 会很好,但旋转会把它扔掉。

body {
margin: 0;
}

.container {
background-color: pink;
padding: 3rem;
position: relative;
}

.tab {
position: absolute;
right: 1rem;
transform: rotate(-90deg);
padding: 1rem;
background-color: green;
margin-right: -2.45rem;
top: 5rem;
}
<body>
<div class="container">
<h1>Button</h1>
<div class="tab">
<button class="tab-button" type="button">Button</button>
</div>
</div>
<hr>
<div class="container">
<h1>Longer button</h1>
<div class="tab">
<button class="tab-button" type="button">Longer Button</button>
</div>
</div>
</body>

最佳答案

调整transform-origin并添加一些translation然后你可以使用right:0

body {
margin: 0;
}

.container {
background-color: pink;
padding: 3rem;
position: relative;
}

.tab {
position: absolute;
right: 0;
transform: rotate(-90deg) translateY(-100%);
transform-origin: top right;
padding: 1rem;
background-color: green;
top: 2rem;
}
<div class="container">
<h1>Button</h1>
<div class="tab">
<button class="tab-button" type="button">Button</button>
</div>
</div>
<hr>
<div class="container">
<h1>Longer button</h1>
<div class="tab">
<button class="tab-button" type="button">Longer Button</button>
</div>
</div>

关于html - 无论内容长度如何,旋转并将元素齐平放置到父元素的边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52528468/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com