L'altezza e la larghezza non si applicano allo span?

254

Domanda noob totale, ma qui.

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>

Violino

Fondamentalmente sto cercando di emulare un pulsante, fare in modo che uno span (o qualcosa) assomigli a un pulsante accanto a un campo di input che in realtà non ha bisogno di essere uno a causa di un generatore di riempimento automatico che genera errori su Enter. Ho pensato che sarebbe stata una soluzione rapida per ora, ma ovviamente no.

Grazie.

css html width

— Kyle
fonte

2

Potresti anche voler dare un'occhiata a stackoverflow.com/questions/2343989/…

— Edan Maor

2

Controllare anche lo standard, in particolare w3.org/TR/CSS2/visudet.html#the-width-property e w3.org/TR/CSS2/visudet.html#the-height-property , che indica le proprietà "Si applica a: tutti gli elementi ma gli elementi

— incorporati

426

Lo span è un elemento incorporato. Non ha larghezza o altezza.

Potresti trasformarlo in un elemento a livello di blocco, quindi accetterà le direttive sulle dimensioni.

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

— Basheer AL-MOMANI
fonte

9

Grazie, risolto. Ho provato a visualizzare: blocco prima ma blocco in linea risolto.

— Kyle

21

Questo è il problema. Se display: blockspecificato, l'intervallo si interrompe per essere un elemento inline e un elemento dopo che appare sulla riga successiva. Ho bisogno di un elemento che sia in linea, ma potrebbe avere la larghezza desiderata.

— Paul

6

una soluzione migliore è la visualizzazione dell'utente: inline-block

— Anant

37

Prova a usare un divinvece di spano usando il CSS display: block;o display: inline-block;- spanè di default un elemento inline che non può assumere widthe heightproprietà.

— Isaac
fonte

9

un div non è un sostituto semantico per un intervallo. Un intervallo è un contenitore testuale mentre un div è un contenitore di layout. L'applicazione di uno stile a blocchi in linea come suggerito da Developer Art è la risposta corretta.

— Brian Scott,

3

La domanda non fornisce alcun contesto per indicare che un div è intrinsecamente inappropriato semanticamente.

— Isaac,

1

In realtà, leggendo il markup dell'operazione sembra che l'elemento in questione venga utilizzato per visualizzare semplicemente un'immagine di sfondo. In questo caso un div sarebbe effettivamente più appropriato. -1 rimosso dal commento originale di Isaac.

— Brian Scott,

Inoltre, ho provato a usare un div prima di passare a span, viene sempre visualizzato sotto il div precedente .. Quindi è andato con Span :)

— Kyle

22

Ispirato da @Hamed, ho aggiunto quanto segue e ha funzionato per me:

display: inline-block; overflow: hidden;

— olleh
fonte

11

Span prende larghezza e altezza solo quando lo facciamo bloccare l'elemento.

span {display:block;}

— Touhid Rahman
fonte

14

Penso che display: inline-block;sia meglio

— 151291,

In questo modo cambierai per tutte le campate, ti consiglio di usare una classe.

— Hola Soy Edu Feliz Navidad,

9

Come da commento di @Paul, se display: viene specificato il blocco, lo span si interrompe per essere un elemento inline e un elemento dopo che appare sulla riga successiva.

Sono venuto qui per trovare una soluzione al mio problema di altezza della campata e ho ottenuto una soluzione tutta mia

L'aggiunta overflow:hidden;e il kee inline risolveranno il problema appena testato in modalità Quirks IE8

— Hamed Ali Khan
fonte

Continuo a vedere overflow:hidden;in questo contesto. "Il contenuto è troncato, senza barre di scorrimento", afferma MDN . Sembra controintuitivo. Che cosa fa qui?

— Bob Stein

8

spandi default sono visualizzati in linea, il che significa che non hanno altezza e larghezza.

Prova ad aggiungere a display: blockal tuo intervallo.

— Edan Maor
fonte

6

Lo span inizia come elemento inline. È possibile modificare l'attributo di visualizzazione in blocco, ad esempio, e i suoi attributi di altezza / larghezza avranno effetto.

2

span {display:block;} aggiunge anche un'interruzione di riga.

Per evitarlo, usa span {display:inline-block;}e quindi puoi aggiungere larghezza e altezza all'elemento inline e puoi anche allinearlo all'interno del blocco:

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

di più qui

— markling
fonte