web-dev-qa-db-ja.com

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

全くの質問ですが、こちらです。

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>​

フィドル

基本的に私はボタンをエミュレートしようとしています、スパン（または何か）が実際に1である必要はない入力フィールドの隣のボタンのように見えるようにします。これは今のところ手っ取り早い解決策だと思いましたが、明らかにそうではありません。

ありがとう。

csshtmlwidth
228
Kyle

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

あなたはそれをブロックレベルの要素に変えることができます、それからそれはあなたの寸法指示を受け入れます。

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

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

35
Isaac

@Hamedからインスピレーションを得て、私は以下を追加しました、そしてそれは私のために働きました：

display: inline-block; overflow: hidden;
18
olleh

スパンを幅と高さにするのは、ブロック要素にするときだけです。

span {display:block;}
9
Touhid Rahman

@Paulからのコメントのとおり、display：blockが指定された場合、spanはインライン要素およびそれが次の行に現れた後の要素ではなくなります。

私は私のスパンの高さの問題に対する解決策を見つけるためにここに来ました、そして私は私自身の解決策を得ました

overflow:hidden;を追加してインラインにしておくと、IE8 Quirksモードでテストしたばかりの問題が解決します。

7
Hamed Ali Khan

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

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

7
Edan Maor

スパンはインライン要素として始まります。たとえば、display属性をblockに変更すると、height/width属性が有効になります。

5
MaxGuernseyIII

span {display:block;}は改行も追加します。

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

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

詳細はこちら

0
markling