50% in linea-blocchi non visualizzano uno accanto all'altro

Question

Dire che ho

e

.ib-half { 
    display: inline-block; 
    width: 50%; 
} 

Mi aspetto che le due campate per visualizzare fianco a fianco, ma non lo faranno. Non ci sono margini, padding o border, quindi qual è il problema?

Answer 1

Il problema reale è lo spazio (newline) tra i due elementi. Poiché è un elemento di blocco in linea, registra lo spazio, quindi è pari al 50% + dello spazio.

Alcune possibilità:

<span class='left'>Left</span><!-- 
--><span class='right'>Right</span> 

o <span class='left'>Left</span><span class='right'>Right</span>

o

<span class='left'>Left</span><span 
class='right'>Right</span> 

o per me è davvero rende probabilmente più senso perfloat: left; e cambiarlo ad un elemento display: block. Credo che la natura degli elementi in linea sia quella di operare nello stesso modo del testo con alcune informazioni extra spaziali, quindi perché prendere l'hacky quando non c'è motivo?

Answer 2

Spero che questo vi aiuterà

<div>  
     <span class="ib-half"></span> 
     <span class="ib-half"></span> 
    </div> 

​ 
     div{ 
      width:50%; 
      display:block; 
     } 
     .ib-half { 
      margin:0; 
      display:inline-block; 
      width: 49%; 
      height:100px; 
      }​ 

qui sto usando un div genitore e impostando la proprietà larghezza e visualizzazione per bloccare. Nel blocco figlio è possibile impostare la proprietà di visualizzazione su blocco in linea e, se si desidera aggiungere più span, è possibile aggiungere diminuendo la larghezza del blocco di span 100/(no: di blocchi) -1. Puoi anche usare la proprietà float per ottenere il risultato.

Answer 3

L'impostazione della dimensione del font dell'elemento padre su zero può essere una correzione.

HTML:

<div class = "parent"> 
    <span class="ib-half">Left</span> 
    <span class="ib-half">Right</span> 
</div> 

CSS:

span{ 
    background:#bdbdbd; 
} 

.ib-half { 
    display: inline-block; 
    width: 50%; 
    font-size:10px; 
} 

.parent { 
    font-size: 0; 
} 

Controllare questo violino. http://jsfiddle.net/YpTMh/9/

Per ulteriori opzioni consultare http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 4

buona risposta in css3 è:

white-space: nowrap; 

nel nodo padre, e:

white-space: normal; 
vertical-align: top; 

a div (o altro) a 50 %

esempio: http://jsfiddle.net/YpTMh/19/