Wie platziert man <span> Elemente nebeneinander?

Question

Ich habe ein kleines Problem mit diesen <span> Elemente in einem <div>.

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

Hier wird der Abschnitt von CSS-Code, ich arbeite mit:

.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; 
} 

Hier ist der HTML-Abschnitt:

<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> 

Ich versuche, das zu bekommen <span>.leftRapper und .rightRapper nebeneinander in der <div>battleBox. Wenn ich jedoch die Eigenschaft CSS display auf inline setze, wird die <span>s aus irgendeinem Grund in eine kleinere Form zerquetscht. Wenn ich die display auf block setze, werden sie in die Größe, die ich will, aber es zeigt sie nicht wie ich will, weil sie nicht inline angezeigt werden.

Was bewirkt, dass die <span>s eine kleinere Größe hat?

Answer 1

hinzufügen oder ersetzen Sie die folgenden Eigenschaften in den folgenden CSS-Klassen/Selektoren:

#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

Sie könnten/sollten einen float: left zu .leftRapper hinzufügen.

Andere Optionen sind z.B. Hinzufügen eines negativen rechten Randes zu .leftRapper.