0

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

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 但它只是搞砸了。

谢谢。

4

4 回答 4

2

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

.menupadding {
    padding: 16px;
    margin-left: 7px;
}
于 2012-12-13T20:03:24.977 回答
1

我认为这是由于 .menupadding 的绝对位置。它的呈现独立于 .menubutton 的宽度。

尽量避免 .menupadding 的绝对位置。

于 2012-12-13T20:05:01.933 回答
0

我无法弄清楚为什么，但是使用 SPAN 和 DIV 来包装相同的元素并不是一件好事。我总是为我的菜单使用一个列表。

<ul class="menu">
  <li>Button 1</li>
  <li>Button 2</li>
</ul>

然后你可以在你的css中使用它：

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

看看有没有效果！

于 2012-12-13T20:05:37.777 回答
0

试试这个：

HTML：

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

CSS：

.menubutton {
   background:url(../gnome.png) repeat-x;
   height: 55px; /* adjust as needed; seems really high */
   padding: 16px 16px 16px 16px; /* adjust sub values to position txt correctly */
}

对文本使用 span 将允许背景图像根据文本的宽度增长。您可以在 .menubutton 的 css 中使用“边距”值来调整位置。

于 2012-12-13T22:14:35.507 回答