Question

当旋转并具有未知宽度的子文本时，如何将这些标签始终保持与容器右侧齐平？

在right: 0;上不旋转.tab会很好，但是旋转会把它扔掉。

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>

Answer 1

调整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>

Answer 2

body {
    margin: 0;
}

.container {
    background-color: pink;  
    padding: 3rem;
    position: relative;  
}

.tab {
    position: absolute;  
    right: -39px;
    transform: rotate(-90deg);
    padding: 1rem;  
    background-color: green;
    top: 5rem;
    min-width: 100px;
}

<html>

<head>
  <link rel="stylesheet" href="lib/style.css">
  <script src="lib/script.js">
  </script>
</head>

<body>
  <div class="container">
    <h1>Button</h1>
    <div class="tab">
      <button class="tab-button" style="width: 100%; white-space: nowrap" type="button">Button</button>
    </div>
  </div>
  <hr>
  <div class="container">
    <h1>Longer button</h1>
    <div class="tab">
      <button class="tab-button" style="width: 100%; white-space: nowrap" type="button">Longer Button</button>
    </div>
  </div>
</body>

</html>

旋转和放置元素使其与父元素的边缘齐平，而与内容长度无关

2 个答案: