Question

我正在尝试在div元素内创建一个垂直按钮，但无法获得div的高度来填充剩余空间。我使用transform翻转了按钮，并且将Bulma用于布局。这是我的代码的概要：

.column {
  border: 1px solid #ddd;
  margin-top: 50px;
  background: gray;
}

.button {
  width: auto;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />

<div class="columns">
  <div class="column">
    <a href="#" class="button">SHOW OPTIONS</a>
  </div>
</div>

不确定在这里我可以做些什么来解决此问题并使它具有响应能力？我知道我总是可以使用固定的高度，但是有什么办法可以做得不同，所以它随内容而扩展？有人可以看看吗，如果您有任何建议，请告诉我？我什至不必使用转换，这似乎是一个合理的选择。

谢谢！

Answer 1

如果出于任何原因不能使用writing-mode属性，则可以使用以下替代解决方案：

.column {
  border: 1px solid #ddd;
  margin-top: 50px;
  background: gray;
}

.button {
  width: auto;
}

.so55562898-outer {
  display: inline-block;
}

.so55562898-inner {
  transform: rotate(90deg);
  padding-top: calc(100% - 36px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />

<div class="columns">
  <div class="column">
    <div class="so55562898-outer">
        <div class="so55562898-inner">
          <a href="#" class="button">SHOW OPTIONS</a>
        </div>
    </div>
  </div>
</div>

请注意，此解决方案需要知道按钮的高度（在这种情况下为 36px ）。

Answer 2

将您的班级名称“ column”更改为column1或其他名称，然后尝试应用CSS列是CSS中的默认名称

.column1 {
  border: 1px solid #ddd;
  margin-top: 50px;
  background: gray;
  display: block;
padding: 3.40rem;
}

.button {
  width: auto;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />

<div class="columns">
  <div class="column1">
    <a href="#" class="button">SHOW OPTIONS</a>
  </div>
</div>

带有可扩展到按钮全高的容器的垂直按钮？

2 个答案: