Yükseklik ve genişlik açıklık için geçerli değil mi?

254

Toplam çaylak sorusu, ama burada.

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>

Vaktini boşa harcamak

Temelde bir düğmeyi taklit etmeye çalışıyorum, bir yayılma alanı (ya da bir şey) aslında onEnter hataları üreten bir otomatik doldurma jeneratör nedeniyle olması gereken bir giriş alanının yanındaki bir düğme gibi görünmesini sağlayın. Bunun şimdilik hızlı bir düzeltme olacağını düşündüm ama belli ki değil.

Teşekkürler.

css html width

— Kyle
kaynak

2

Ayrıca stackoverflow.com/questions/2343989/…

— Edan Maor

2

Ayrıca standart, özellikle kontrol w3.org/TR/CSS2/visudet.html#the-width-property ve w3.org/TR/CSS2/visudet.html#the-height-property özellikleri "için geçerlidir devlet: değiştirilmeyen satır içi öğeler, tablo satırları ve satır grupları hariç tüm öğeler "

— outis

426

Span bir satır içi öğedir. Genişliği veya yüksekliği yoktur.

Bunu blok düzeyinde bir öğeye dönüştürebilirsiniz, o zaman boyut yönergelerinizi kabul edecektir.

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

— Basheer AL-MOMANI
kaynak

9

Teşekkürler, düzelttim. Display: block'u daha önce denedim ama satır içi blok düzeltti.

— Kyle

21

İşte sorun bu. Eğer display: blockbelirtilirse, yayılma sonraki satırda görünür sonra bir satır içi elemanı ve bir unsuru olmaya durur. Satır içi, ancak istenen genişlikte olabilir bir öğeye ihtiyacım var.

— Paul

6

daha iyi bir çözüm kullanıcı görüntüleme: inline-block

— Anant

37

CSS divyerine spanveya kullanmayı deneyin display: block;veya display: inline-block;- spanvarsayılan olarak, alamayan widthve heightözellikler içeren bir satır içi öğedir .

— Isaac
kaynak

9

div, bir açıklığın anlamsal yerine geçmez. Yayılma alanı metinsel bir kapsayıcıdır, div ise mizanpajlı bir kapsayıcıdır. Developer Art'ın önerdiği gibi satır içi blok stilini uygulamak doğru cevaptır.

— Brian Scott

3

Soru, bir div'in anlamsal olarak uygunsuz olduğunu gösteren hiçbir bağlam sağlamaz.

— Isaac

1

Aslında, op'un işaretlemesini okumak, söz konusu öğenin basitçe bir arka plan resmini görüntülemek için kullanıldığına benziyor. Bu durumda bir div aslında daha uygun olur. -1 Isaac'in orijinal yorumundan kaldırıldı.

— Brian Scott

Ayrıca, span değerine geçmeden önce bir div kullanmaya çalıştım, her zaman önceki div'in altında görüntüleniyor .. Yani Span ile gitti :)

— Kyle

22

@Hamed'den esinlenerek aşağıdakileri ekledim ve benim için çalıştı:

display: inline-block; overflow: hidden;

— olleh
kaynak

11

Span, genişliği ve yüksekliği yalnızca blok öğesi yaptığımızda alır.

span {display:block;}

— Touhid Rahman
kaynak

14

Bence display: inline-block;daha iyi

— 151291

Bu şekilde tüm açıklıkları değiştireceksiniz, bir sınıf kullanmanızı tavsiye ederim.

— Hola Soy Edu Feliz Navidad

9

@Paul'daki açıklamaya göre, display: block belirtilirse, span bir satır içi öğe ve bir sonraki satırda göründükten sonra bir öğe olarak durur.

Buraya açıklık yüksekliği sorunuma çözüm bulmak için geldim ve kendime ait bir çözüm buldum

overflow:hidden;Satır içi ekleme ve ekleme , IE8 Quirks modunda test edilen sorunu çözecektir

— Hamed Ali Khan
kaynak

overflow:hidden;Bu bağlamda görmeye devam ediyorum . "İçerik kırpılmış, kaydırma çubuğu olmadan" diyor MDN . Sezgisel görünüyor. Burada ne yapar?

— Bob Stein

8

spans varsayılan olarak satır içi görüntülenir, yani yükseklik ve genişlik yoktur.

display: blockYayılma alanınıza bir eklemeyi deneyin .

— Edan Maor
kaynak

6

Span, satır içi öğe olarak başlar. Örneğin, display özniteliğini engelleyecek şekilde değiştirebilirsiniz; yükseklik / genişlik öznitelikleri geçerli olmaya başlar.

2

span {display:block;} satır sonu ekler.

Bundan kaçınmak için, öğesini kullanın span {display:inline-block;}ve ardından satır içi öğeye genişlik ve yükseklik ekleyebilir ve bunu blok içinde de hizalayabilirsiniz:

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

Daha fazla burada

— markling
kaynak