css - 按钮不会变宽？

Question

刚刚创建了这个应该看起来像这样的菜单

http://gyazo.com/8afc87a69d0d859f9069bbcaa1547745.png

如果按钮的文本太长，我会为每个按钮使用最小宽度和最大宽度。我有一个按钮的渐变 bg-repeat

但是每当文本变大时，就会发生这种情况(最后一个按钮):

http://gyazo.com/44852f4b9b7b5fce3e8d156f469a6852.png

这是我用于每个按钮的 HTML 代码:

<div class="menubutton"><span class="menupadding">hofffffffffffme</span></div>

这是CSS:

.menubutton {
  background-image: url("../img/buttonbg.png");
  background-repeat: repeat-x;
  min-width: 82px;
  height: 55px;
}

.menupadding {
  position: absolute;
  padding: 16px;
  margin-left: 7px;
}

如果菜单按钮的文本超过宽度限制，我该如何做到这一点，按钮会自动变宽？我试过 width: auto 但它只是搞砸了。

谢谢。

Answer 1

.menupadding 跨度实际上根本不影响其父级的布局。如果 div 上没有最小宽度，按钮将简单地折叠为零宽度。解决方案是不要在跨度上使用绝对定位:

.menupadding {
    padding: 16px;
    margin-left: 7px;
}