最小宽度 0 不适用于按钮答案

【问题标题】：Min-width 0 doesn't work for buttons最小宽度 0 不适用于按钮
【发布时间】：2014-09-10 11:39:33
【问题描述】：

我希望用一个平滑的动画替换一个按钮，并且不改变元素的高度，因为我将在它们下面有其他我不想移动的按钮（所以我不认为我可以使用 .hide 和 .show 并且我想要从右到左替换）。我对使用其他技术的解决方案持开放态度，但请注意，我希望它能够在 PC、Android 和 iOS 上的所有现代浏览器中运行。

我认为我会使用 JQuery“.animate”。但是，当我设置下面的代码示例并单击按钮时，它并没有缩小到什么都没有（尽管我设置了最小宽度）。

如果这个问题无法解决，它会在我的特殊效果中产生褶皱，并且过于复杂地解决它（当第一个按钮达到非零最小尺寸时，我会在最后有一个混蛋，只是消失，另一个跳到全尺寸）。

在最终版本中，在第一个按钮之后会有另一个按钮同时从 0px 扩展，但我认为（除非另有说明）解析下面的脚本也将导致如何从 0px 宽度开始。

请帮忙。谢谢。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("button").animate({width:'0px'});
  });
});
</script> 
<style>
button {
min-width:0px;
height: 22px;
}
</style>
</head>

<body>
<button>Start Animation</button>

</body>
</html>

【问题讨论】：

那是因为按钮也有内边距和边框。

标签： jquery css html jquery-animate

【解决方案1】：

您也可以直接在代码中添加 CSS 属性。看看 DEMO。

$(document).ready(function(){
  $("button").click(function(){
    $("button").animate({width:'0px', padding:'0', border:'0'});
  });
});

【讨论】：

嗨。虽然这很好地解决了我遇到的字面问题，但谢谢，请参阅以下后续问题：stackoverflow.com/questions/24841556/…

【解决方案2】：

将下面的css添加到按钮

 display:inline-block;
 padding:0px;
 border:0px;

【讨论】：

你能解释一下为什么会这样吗？
@putvande button 元素有一些填充，默认情况下为1px border，这就是设置width:0 的原因，除非您将它们重置为0，否则您仍然会看到按钮。或者你可能会添加一个 CSS 重置属性。