Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2014
    residenza
    Voltati
    Messaggi
    913

    Spazio di troppo tra due <li>

    C'è qualche spazio di troppo tra i li

    Ho anche controllato con gli strumenti di sviluppo di chrome (che ti evidenziano margin, padding e dimensione dell'elemento) e risulta uno spazio tra i margin degli elementi

    Cattura.JPG

    (Lo spazio di troppo è quello tra le icone)

    codice HTML:
    <ul id="social">
        <li>
            <a href="#" title="Iscriviti ai Feed">
                <img src="img/icon-feed.png" alt="Feed">
            </a>
        </li>
        <li>
            <a href="#" title="Seguici si Facebook">
                <img src="img/icon-facebook.png" alt="Facebook">
            </a>
        </li>
        <li>
            <a href="#" title="Seguici su Twitter">
                <img src="img/icon-twitter.png" alt="Twitter">
            </a>
        </li>
    </ul>
    codice:
    #top-bar #social {
        list-style: none;
        display: inline;
        margin: 0;
        padding: 0;
        float: right;
    }
    
    
    #top-bar #social li {
        display: inline-block;
        margin: 0;
        margin-top: 17px;
    }
    No

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ciao, generalmente questo problema è dato dal fatto che sono presenti degli spazi affianco al tag <img>. Questi, condensandosi, vanno a creare un singolo spazio.

    Puoi risolvere semplicemente mettendo ogni tag <a> (e contenuti) su singole righe.
    codice:
    <a href="#" title="Iscriviti ai Feed"><img src="img/icon-feed.png" alt="Feed"></a>
    Nel caso anche gli elementi <li>
    codice:
    <li><a href="#" title="Iscriviti ai Feed"><img src="img/icon-feed.png" alt="Feed"></a></li>
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2014
    residenza
    Voltati
    Messaggi
    913
    Ho provato, non si risolve niente...

    Ecco un'esempio
    http://jsfiddle.net/Nicolo99/Z6Jdg/e...sult,html,css/
    No

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ho visto... però mettendo tutto il blocco <ul> in un unica linea si risolve... certo il codice resta poco elegante
    codice:
    <ul id="social"><li><a href="#" title="Iscriviti ai Feed"><img src="http://www.talaricocostruzioni.it/img/icone_social_facebook.png" alt="Feed"></a></li><li><a href="#" title="Seguici si Facebook"><img src="http://www.talaricocostruzioni.it/img/icone_social_facebook.png" alt="Facebook"></a></li><li><a href="#" title="Seguici su Twitter"><img src="http://www.talaricocostruzioni.it/img/icone_social_facebook.png" alt="Twitter"></a></li></ul>
    EDIT:
    Un'altra soluzione può essere quella di impostare float e display block agli elementi <li>

    codice:
    #top-bar #social li {
        display: block;
        float: right;
        margin-top: 17px;
    }
    Ultima modifica di KillerWorm; 03-06-2014 a 21:20
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2014
    residenza
    Voltati
    Messaggi
    913
    beh, grazie

    Ma perché il display:inline-block si comporta così?
    No

  6. #6
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    copia e incolla

    codice:
    <p>e
    e</p>
    fra le due "e" non ho lasciato alcuno spazio, ma l'accapo è visto come uno spazio negli elementi in linea

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.