Con l'avvento di HTML5 e CSS3, la proprietà CSS display si è arricchita di un nuovo valore denominato inline-block. Questo nuovo valore permette agli oggetti renderizzati inline (cioè uno accanto all'altro come ad esempio span e label) di prendere in considerazione proprietà come padding, margin, width o height che sono utilizzate solo dagli elementi renderizzati come block (div, p e così via).
Grazie a questo nuovo valore possiamo limitare l'uso della proprietà float in quanto gli elementi di tipo block vengono automaticamente renderizzati uno accanto all'altro. Vediamo ora come usare il nuovo valore.
<ul><li>item1</li> <li>item2</li> <li>item3</li>
Il risultato di questo frammento HTML sono i tre elementi li uno sotto l'altro in quanto i tag li sono renderizzati come block. Modifichiamo ora la modalità di renderizzazione a inline-block.
ul li { display: inline-block; }
Aggiungendo questa direttiva CSS, il frammento HTML visto in precedenza viene renderizzato con i tre tag li uno accanto all'altro.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Utilizzare gli snapshot con Azure File shares
Creare moduli CSS in React
Usare il versioning con i controller di ASP.NET Core Web API
Configurare policy CORS in Azure Container Apps
Criptare la comunicazione con mTLS in Azure Container Apps
Gestire undefined e partial nelle reactive forms di Angular
Generare file PDF da Blazor WebAssembly con iText
Usare il colore CSS per migliorare lo stile della pagina
Utilizzare Tailwind CSS all'interno di React: installazione
Modificare i metadati nell'head dell'HTML di una Blazor Web App
I più letti di oggi
- Sfruttare le funzionalità degli Azure Cognitive Service on-edge con i container
- Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
- I tutorials, percorsi guidati per tutti
- Introduzione ai Cognitive Services di Microsoft Azure
- Gestire gli eventi dei servizi Azure mediante Event Grid