Uso i tag <span> nei titoli del modulo, ad es.Larghezza CSS di un tag <span>
<span>Categories</span>.
ho specificare il colore di sfondo/immagine della campata, larghezza e altezza in css.
Ma la larghezza dello span dipende dal suo contenuto/testo.
Quindi, se faccio <span></span>, con solo un'immagine di sfondo/colore in css, non appare nulla.
Certo, voglio che qualcosa appaia.
Come posso risolvere questo?
È possibile impostare in modo esplicito la proprietà di visualizzazione su "blocco" in modo che si comporti come un elemento a livello di blocco, ma in questo caso si dovrebbe probabilmente utilizzare semplicemente un div.
<span style="display:block; background-color:red; width:100px;"></span>
grazie, vedo. ciò accade perché lo span è in linea. ora vedo la differenza scommessa. display inline e blocchi. sì, div è appropriato.:D..grazie –
Utilizzando un DIV all'interno di paragrafi, le intestazioni (h1, h2 ecc.) interromperanno la convalida se ci tieni. Un'altra possibile soluzione è usare una span, display: block; e fluttua: a sinistra; :) –
grazie, e la risposta sotto è stata fondamentale per ottenere la larghezza di lavoro – Angela
Non è possibile specificare la larghezza di un elemento con display in linea. Potresti inserire qualcosa in esso come uno spazio senza interruzione ( ) e quindi impostare il riempimento per dargli un po 'più di larghezza ma non puoi controllarlo direttamente.
È possibile utilizzare il blocco inline di visualizzazione, ma questo non è ampiamente supportato.
Un vero trucco sarebbe quello di mettere un'immagine all'interno e quindi impostare la larghezza di quello. Qualcosa come una GIF trasparente da 1 pixel. Non l'approccio raccomandato comunque.
si estende di default in stile in linea, che non è possibile specificare la larghezza di.
display: inline-block;
sarebbe un buon modo, ad eccezione di IE non lo supporta
È possibile, tuttavia, hack a multiple browser solution
Credo che IE supporti il blocco in linea almeno dalla versione 6. Penso che supporti solo il blocco in linea se l'elemento a cui è applicato è naturalmente in linea (che è ). –
Sì, IE supporta il blocco inline. Il suo supporto è sottilmente diverso, ma funzionerebbe in questo caso. – thomasrutter
Fantastico! Iniziando a capire le vere differenze nel display: –
Utilizzare l'attributo 'display', come nell'esempio:
<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>
Vorrei utilizzare l'attributo padding. Ciò consentirà di aggiungere un numero di pixel per ciascun lato dell'elemento senza l'elemento perdere le sue caratteristiche di span:
Tuttavia, questo metodo si aggiungerà al riempimento, quindi se cambi la lunghezza del contenuto (dalle Categorie ai Tag, ad esempio) la dimensione del contenuto cambierà e anche la dimensione complessiva dell'elemento cambierà. Ma se vuoi davvero impostare una dimensione rigida, dovresti fare come detto sopra e usare un div.
Vedere la box model per maggiori dettagli circa il box model, il contenuto, padding, margini, ecc
Dopo aver fissato l'altezza e la larghezza si sholud dire al come bahave se il testo al suo interno trabocca la sua area.Quindi aggiungi il css
overflow: auto;
Come in altre risposte, avviare il lasso attributi con questo:
display:inline-block;
Ora è possibile utilizzare imbottitura più di larghezza:
padding-left:6%;
padding-right:6%;
Quando si utilizza imbottitura, il colore si espande per entrambi i lati (destra e sinistra), non solo a destra (come in widht).
Vorrei solo precisare che questo non è un ottimo uso dello span. Ha lo scopo di contrassegnare brevi intervalli di contenuti all'interno di un intero più grande, quindi non è intenzionalmente un elemento di blocco per impostazione predefinita. Per i titoli, uno dei tag h # sarebbe il migliore. In caso contrario, un div è ancora in genere migliore di una span. – Chuck
grazie per le vostre risposte ..: D trovo che questo sia uno stupido q'n per cominciare con.lol .. già molti anni fa. =)) –