Come posizionare gli elementi <span> affiancati?

Question

Ho un piccolo problema con questi elementi <span> in un <div>.

http://jsfiddle.net/kkzLW/179/

Ecco la sezione di codice CSS che sto lavorando con:

.rightRapper { 
    border-style: dotted; 
    margin-left: 105px; 
    margin-top: 0px; 
    height: 90px; 
    width: 100px; 
    display: block; 
} 

.leftRapper { 
    border-style: dotted; 
    margin-left: 0px; 
    height: 90px; 
    width: 100px; 
    display: block; 
} 

Qui è la sezione HTML:

<div id="battleBox"> 
    <span class="leftRapper"> 
    <span id="buttonColumn">   
     <span id="container3" class="topButton"> 
     <a href="" id="linktomouseover">+</a> 
     </span> 
     <span id="container4" class="bottomButton"> 
     <a href="" id="linktomouseover2">-</a> 
     </span> 
    </span> 
    </span> 
    <span class="rightRapper"> 
    <span id="buttonColumn">   
     <span id="container" class="topButton"> 
     <a href="" id="linktomouseover3">+</a> 
     </span> 
     <span id="container2" class="bottomButton"> 
     <a href="" id="linktomouseover4">-</a> 
     </span> 
    </span> 
    </span> 
</div> 

Sto cercando di ottenere il <span>.leftRapper e .rightRapper da affiancare nello <div>battleBox. Tuttavia, quando imposto la proprietà CSS display su inline, lo <span>s viene schiacciato in una forma più piccola per qualche motivo. Quando imposto lo display su block, li trasformo nella dimensione desiderata ma non li visualizza nel modo desiderato, perché non sono visualizzati in linea.

Che cosa sta causando una dimensione minore dello <span>s?

Answer 1

aggiungere o sostituire le proprietà di seguito nei seguenti classi CSS/selettori:

#battleBox { 
    width: 216px; /* increasing width from 210 to 216 because your border takes 6 extra px*/ 
} 

.rightRapper { 
    margin: 0px; /* remove all margins to fit two divs in the container */ 
    display: inline-block; /* display block elements in one line */ 
} 

.leftRapper { 
    margin: 0px; 
    display: inline-block; 
} 

Example

Answer 2

Si potrebbe/dovrebbe aggiungere uno float: left a .leftRapper.

Altre opzioni sono ad es. aggiunta di un margine destro negativo a .leftRapper.