7

幅が可変のボタンがいくつかありますが、すべて特定の幅にしたいのですが。追加しようとしても機能width: 150px;しません。すべてが設定された幅を持つこれらのボタンを作成するにはどうすればよいですか？

これがフィドルで、コードは次のとおりです。

HTML

<p><a class="dark_button 150px-width" href="#">Lorem</a></p>
<p><a class="dark_button 150px-width" href="#">Lorum Ipsum</a></p>
<p><a class="dark_button 150px-width" href="#">Lorum Ipsum dolor</a></p>
<p><a class="dark_button 150px-width" href="#">Lorum Ipsum dolor sit amet</a></p>

CSS

.dark_button{
  border-top: 1px solid #969696;
  background: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#545454), to(#000000));
  background: -webkit-linear-gradient(top, #545454, #000000);
  background: -moz-linear-gradient(top, #545454, #000000);
  background: -ms-linear-gradient(top, #545454, #000000);
  background: -o-linear-gradient(top, #545454, #000000);
  padding: 5px 10px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  color: #e3e3e3 !important;
  font-size: 14px;
  text-decoration: none;
  vertical-align: middle;
}
.dark_button:hover {
  border-top-color: #4f4f4f;
  background: #4f4f4f;
  color: #ccc;
  text-decoration:none;
}
.dark_button:active {
  border-top-color: #4a4a4a;
  background: #4a4a4a;
}

.150px-width{
 width: 150px;
}
4

4 に答える 4

15

カップルの問題：

  1. 要素はインライン要素です。aつまり、明示的な幅を指定することはできません。
  2. クラスを数字で始めることはできません。

displayプロパティを次のようなものに設定するblockかinline-block、に関する希望を尊重する必要がありますwidth。width-150pxさらに、代わりにのようなクラス名を使用します。これにより、上記の問題2が解決されます。

フィドル： http： //jsfiddle.net/yQu8H/5/

于 2012-09-24T01:56:28.567 に答える
3

CSSクラス名を数字で始めることはできません。文字を使用する必要があり、名前では大文字と小文字が区別されます。

参照：CSSクラス名/セレクターで有効な文字はどれですか？

于 2012-09-24T01:53:10.140 に答える
2

クラス名に関する答えは正しいですが、解決策の一部にすぎません。

また、アンカー要素（インライン要素）をブロック要素（divなど）内で囲み、幅をブロック要素に割り当てる必要があります。したがって、「構造」スタイルをdivに適用し、テキストスタイルをアンカーに適用する必要があります。

これは、少しリファクタリングが適用されたフィドルです。

http://jsfiddle.net/gZtdZ/

于 2012-09-24T02:01:49.387 に答える
1

クラス名を数字で始めることはできません。多分それが問題です。文法を確認してください

于 2012-09-24T01:56:39.393 に答える