Question

我尝试在CSS中使用calc()创建一个简单的文本滑块，但它无效。

为了说明它应该如何运作，我还添加了正确的值

编辑：
我已经编辑了代码，它现在不应该包含任何其他错误，但它仍然无法正常工作。
calc（）中的100％似乎是指父元素我能解决这个问题吗？

＆＃13;

.box {
  width: 200px;
  height: 30px;
  line-height: 30px;
  font-family: arial;
  font-weight: bold;
  color: #FFF;
  background: #000;
  overflow: hidden;
  cursor: default;
  -moz-user-sselect: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.text {
  white-space: nowrap;
  float: left;
  padding: 0 7px;
  box-sizing: border-box;
  transition: margin 0.5s linear;
  background: #404040;
}

.a:hover {
  transition: margin 2s linear;
  margin: 0 0 0 -90.25px;
}

.b:hover {
  transition: margin 2s linear;
  margin: 0 0 0 calc(200px - 100%);
}

＆＃13;

<div class="box">
  <div class="text a">Dieser Text ist zu groß für diese Box</div>
</div>
<br>
<div class="box">
  <div class="text b">Dieser Text ist zu groß für diese Box</div>
</div>

＆＃13;

Answer 1

如果运算符周围没有空格，则calc内的表达式将不起作用。 margin: calc(200px - 100%);应该有用。

Answer 2

您错过了margin: calc(200px - 100%)

中的空间

您应该使用margin: calc(200px-100%)代替.box { width: 200px; height: 30px; line-height: 30px; font-family: arial; font-weight: bold; color: #FFF; background: #000; overflow: hidden; cursor: default; -moz-user-sselect: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .text { white-space: nowrap; float: left; padding: 0 7px; box-sizing: border-box; transition: margin 0.5s linear; background: #404040; } .text:hover { transition: margin 2s linear; margin: 0 0 0 -90.25px; //<-this should be the result of calc. margin: calc(200px - 100%); //<-why does this not work? }。

如需进一步参考，最好查看此link

＆＃13;

<div class="box">
  <div class="text">Dieser Text ist zu groß für diese Box</div>
</div>

＆＃13;

plotly

＆＃13;

CSS calc（）为什么100％=父元素的宽度而不是实际元素的宽度

2 个答案: