Question

我正在尝试创建带有文本的html按钮/标签，并且最初为零宽度（插入后，它们将被拉伸为可见，但我希望此过渡是平滑的）。我已经尝试修改初始宽度和最小宽度样式属性，但没有运气。

以下是我想要的工作。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .zerowidth{width: 0px;min-width: 0px;}
      .nonzerowidth{font-size: 30px;}
      button{font-size: 30px;}
      label{font-size: 30px;}
      span{font-size: 0px;}
    </style>
  </head>
  <body>
    <span>
      <button>This should be visible</button>
      <button class='zerowidth'>I want this to be invisible</button>
      <label class='zerowidth'>same here</label>
      <button>c</button>
    </span>
  </body>
</html>

我希望上面看起来与没有.zerowidth元素的版本相同，这样.zerowidth元素的宽度可以稍后设置为非零值。

如果有一种更容易的方法将项目插入到DOM中，可以顺利地重新定位它周围的元素（上面是一个玩具示例 - 实际上我将以编程方式从Dart插入元素），我会很高兴听到这一点（尽管如果可能的话，我宁愿远离绝对定位一切）。

感谢。

Answer 1

要使button元素的总宽度达到零（不仅仅是内容宽度，这是CSS属性width指定的内容），您需要设置水平填充和垂直边界为零。此外，为了防止浏览器将内容划分为多行，您需要防止换行。你需要隐藏溢出的内容;当然，对于内容宽度为零的元素，任何内容都会溢出。因此，您将添加以下内容：

  .zerowidth {
     padding-left: 0; padding-right: 0;
     border-left-width: 0; border-right-width: 0;
     white-space: nowrap;
     overflow: hidden;
  }

出于某种原因，这不足以使label元素为零宽度（在IE，Chrome，Firefox上测试）。另一方面，label元素用于指定表单字段和其他可标记元素的标签，通过尝试将其用于其他内容，您只会遇到麻烦。所以考虑使用例如而是span。

Answer 2

<button class='zerowidth'>I want this to be invisible</button>
<label class='zerowidth'>same here</label>

如果您希望这两件事看不见，为什么不向两者添加style="display:none;"。如果您想要显示它们，请对该元素执行hover effect和display:block;。

使用文本和零初始宽度创建html按钮/标签

2 个答案: