Question

所以我试图将这个绝对定位的红色div与文本完全对齐，我正在使用变换和旋转以翻转div但是在过程中div保持浮动右边的右边界视口，我希望完全与右边界对齐。

我怎么能用css来解决这个问题？

body{position:relative;}

<div style="padding:15px 125px 15px 15px; background-color:red; display:flex; align-items:center; z-index:999999999999999;  position:absolute; right:0px; top:40%; transform: rotate(-90deg); transform-origin:center;">
    <i class="fa fa-cutlery" style="color:black; font-size:20px; margin-right:10px;"></i>
	<span style="font-size:30px; color:black;">Reservar</span>
</div>

Answer 1

您可以像这样调整代码：

＆＃13;

<div style="padding:15px 125px 15px 15px; background-color:red; display:flex; align-items:center; z-index:999999999999999;  position:absolute; right:0px; top:0; transform:rotate(-90deg) translateY(-100%);transform-origin:top right;">
    <i class="fa fa-cutlery" style="color:black; font-size:20px; margin-right:10px;"></i>
	<span style="font-size:30px; color:black;">Reservar</span>
</div>

＆＃13;

旋转的div不会粘贴到视口的右边界（左边的平面）

1 个答案: