高さと幅はスパンに適用されませんか？

254

完全なnoobの質問ですが、ここにあります。

CSS

.product__specfield_8_arrow {

    /*background-image:url(../../upload/orng_bg_arrow.png);
    background-repeat:no-repeat;*/
    background-color:#fc0;
    width:50px !important;
    height:33px !important;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
    cursor:pointer;
}

HTML

<span class="product__specfield_8_arrow">&nbsp;</span>

フィドル

基本的に私はボタンをエミュレートしようとしています。スパン（または何か）を、入力フィールドの横にあるボタンのように見せます。これは、Enterでエラーを生成する自動入力ジェネレーターのため、実際には1である必要はありません。これは今のところ簡単な修正になると思いますが、明らかにそうではありません。

ありがとう。

css html width

— カイル
ソース

2

また、stackoverflow.com

— questions /

2

また、標準のw3.org/TR/CSS2/visudet.html#the-width-propertyとw3.org/TR/CSS2/visudet.html#the-height-propertyも確認してください。置換されていないインライン要素、テーブル行、および行グループを除くすべての要素」

— outis

426

スパンはインライン要素です。幅や高さはありません。

あなたはそれをブロックレベルの要素に変えることができ、それからそれはあなたの次元ディレクティブを受け入れます。

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}

— Basheer AL-MOMANI
ソース

9

ありがとう、修正しました。以前display：blockを試しましたが、インラインブロックで修正しました。

— カイル

21

それが問題です。display: blockが指定されている場合、spanは、インライン要素および次の行に表示された後の要素で停止します。インラインの要素が必要ですが、希望の幅にすることができます。

— Paul

6

より良い解決策はユーザーディスプレイです：インラインブロック

— Anant

37

のdiv代わりに、spanまたはCSS を使用してみてください。display: block;またはdisplay: inline-block;— spanは、デフォルトではwidth、heightプロパティを取得できないインライン要素です。

— アイザック
ソース

9

divはスパンの意味上の置き換えではありません。スパンはテキストコンテナーですが、divはレイアウトコンテナーです。Developer Artが提案したようなインラインブロックスタイルを適用するのが正解です。

— ブライアンスコット

3

質問は、divが本質的に意味的に不適切であることを示すコンテキストを提供しません。

— Isaac

1

実際には、opのマークアップを読み取ると、問題の要素が背景画像の表示に使用されているように見えます。この場合、実際にはdivがより適切です。-1は、Isaacの元のコメントから削除されました。

— ブライアンスコット

さらに、スパンに切り替える前にdivを使用しようとしましたが、それは常に前のdivの下に表示されます。そのため、スパンを使用しました:)

— Kyle

22

@Hamedから発想を得て、以下を追加しましたが、うまくいきました。

display: inline-block; overflow: hidden;

— olleh
ソース

11

スパンは、要素をブロックする場合にのみ幅と高さを取ります。

span {display:block;}

— トーヒド・ラーマン
ソース

14

私display: inline-block;はより良いと思います

— 151291

この方法を使用すると、すべてのスパンが変更されます。クラスを使用することをお勧めします。

— Hola Soy Edu Feliz Navidad

9

@Paulからのコメントに従って、display：ブロックが指定されている場合、spanはインライン要素および次の行に表示された後の要素で停止します。

スパンの高さの問題の解決策を見つけるためにここに来て、自分の解決策を得ました

overflow:hidden;インラインで追加してキーイングすると、IE8 Quirksモードでテストされたばかりの問題が解決されます

— ハメドアリカーン
ソース

私overflow:hidden;はこの文脈で見続けます。「コンテンツはクリップされ、スクロールバーはありません」とMDNは言います。直感に反するようです。ここでは何をしますか？

— Bob Stein

8

spanはデフォルトではインラインで表示されます。つまり、高さと幅はありません。

display: blockスパンにを追加してみてください。

— エダンマオル
ソース

6

スパンはインライン要素として始まります。たとえば、表示属性をブロックに変更すると、高さ/幅の属性が有効になります。

2

span {display:block;} また、改行を追加します。

これを回避するにはspan {display:inline-block;}、インライン要素に幅と高さを追加し、ブロック内で整列させることができます。

span {
        display:inline-block;
        width: 5em;
        font-weight: normal;
        text-align: center
     }

もっとここに

— マークリング
ソース