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 に最小幅がない場合、ボタンは単純に折りたたまれて幅が 0 になります。解決策は、スパンで絶対配置を使用しないことです。

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

これは .menupadding の絶対位置によるものだと思います。.menubutton の幅とは無関係にレンダリングされます。

.menupadding の絶対位置を避けてみてください。

于 2012-12-13T20:05:01.933 に答える
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 */
}

テキストにスパンを使用すると、テキストの幅に応じて背景画像を大きくすることができます。.menubutton の css で「マージン」値を使用して、位置を調整できます。

于 2012-12-13T22:14:35.507 に答える
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 に答える