Question

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

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

如果按钮的文字太长，我已经使用每个按钮的最小宽度和最大宽度。我有按钮的渐变bg重复

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

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;
}

如果菜单按钮的文字超过宽度限制，我该如何制作，按钮会自动变宽？我试过宽度：自动，但它只是搞砸了。

感谢。

Answer 1

.menupadding范围实际上并没有影响其父级的布局。如果你没有div的最小宽度，按钮就会折叠到零宽度。解决方案是不在跨度上使用绝对定位：

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

Answer 2

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

尝试避免.menupadding的绝对位置。

Answer 3

我无法弄明白为什么，但使用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;
}

看看它是否有效！

Answer 4

试试这个：

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将允许背景图像根据文本的宽度增长。您可以在.ssubutton的css中使用“margin”值来调整定位。

按钮不会变宽？

4 个答案: