padding sinistro sul tag di ancoraggio

ho un jsfiddle sotto con un esempio dei miei collegamenti visualizzati in un blocco in linea, ciò che non capisco è perché c'è una sorta di padding o margine all'inizio di ogni tag di ancoraggio , forse qualcuno potrebbe darmi una mano, non sono sicuro di aver perso qualcosa, ma non riesco a capire perché il padding è lì?padding sinistro sul tag di ancoraggio

Questo è il codice html:

<div class="wrapper"> 
    <header class="main-header"> 
      <h1>blah blah blah</h1> 
      <nav class="main-nav"> 
       <ul class="main-nav-links"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Get a Quote</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 
     </header>

Questo è tutto il codice CSS:

.wrapper { 
    width: 100%; 
    min-width: 960px; 
} 

.main-header { 
    position: relative; 
    width: 100%;  
    height: 60px; 
    background-color: #41a2cd; 
} 

.main-header > h1{ 
    float: left; 
    margin: 11px 0 0 5px; 
    color: #073a4f; 
} 

.main-nav-links > li { 
    list-style: none; 
    display: inline-block; 
} 

.main-nav-links li > a { 
    text-decoration: none; 
    display: block; 
    color: #073a4f; 
} 

.main-nav-links > li { 
    border-right: 1px solid #45b1e1; 
} 

.main-nav-links li > a:hover { 
    background-color: #ffffff; 
    /*background-color: #50bae8;*/ 
}

http://jsfiddle.net/pDvZt/

fonte

2013-08-08 thechrishaddad

un facile capire, rimuovere quegli stili e scoprire la differenza. – Praveen

Quando si utilizza display: inline-block; lascerà 4px spaziatura tra gli elementi, in modo da è necessario utilizzare margin-left: -4px; o considerare l'utilizzo di float.

Demo (Usando margin-left: -4px;)

.main-nav-links > li { 
    list-style: none; 
    display: inline-block; 
    margin-left: -4px; 
}

Demo 2 (Usando float proprietà)

.main-nav-links > li { 
    list-style: none; 
    float: left; 
}

Nota: Non dimenticare di cancellare gli elementi galleggianti se si utilizza float: left; per li proprietà.

Edit: Vorrei specificare che inorder per impedire questo comportamento è anche possibile modificare il markup (se hai accesso ad esso) di quanto si possa allineare i tuoi li elementi in modo che lo spazio bianco tra gli elementi non ci saranno più, per esempio

<ul> 
    <li></li><li></li><li></li><li></li> 
</ul>

fonte

2013-08-08 04:57:33

quando dici di cancellare i tuoi elementi fluttuanti cosa intendi esattamente? e come lo farei perché ora funziona tutto ma quando zoom in e fuori dalla mia finestra i miei contenitori si spostano e penso che sia perché non li ho cancellati. – thechrishaddad

non importa, ho riparato, grazie mille! I contenitori – thechrishaddad

@ user1265535 si restringono sempre quando si ingrandisce o rimpicciolisce, se si desidera conoscere la cancellazione, basta cercare su google "float clear" e si otterranno tonnellate di articoli altrimenti è possibile fare riferimento alla mia risposta [qui] (http: // stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734) –

una soluzione è quella di mettere

<li></li><li></li>

in una linea. Questo in realtà perché le nuove linee sono formattate come spazi.

fonte

2013-08-08 05:04:17 Sara

+1 Yea Ho dimenticato di aggiungere questo: p ma questo rovinerà il suo file sorgente se otterrà una loooooong singola stringa –

In realtà, è lo spazio bianco in generale che aggiunge l'offset di 4 pixel, non solo le nuove linee. –

<li></li><li></li>

sua la soluzione migliore si può ottenere

fonte

2013-08-08 06:24:09

padding sinistro sul tag di ancoraggio

risposta

Problemi correlati