<span> elemanları yan yana nasıl yerleştirilir?

Question

<div> ürününde bu <span> öğelerinde küçük bir sorunum var. İşte

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

Ben CSS kodunun bölümü çalışıyorum ki:

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

Ben almaya çalışıyorum: Burada

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

HTML bölümdür <div> battleBox numaralı telefondan yan yana olmak üzere <span> .leftRapper ve .rightRapper. Ancak, CSS display özelliğini inline olarak ayarladığımda, <span>s nedense daha küçük bir şekle sığdırılır. display'u block olarak ayarladığımda, onları istediğim boyuta dönüştürür ancak istediğim gibi göstermez, çünkü satır içi görüntülenmezler.

<span>s ürününe daha küçük bir boyuta sahip olmasının nedeni nedir?

Answer 1

Ekleme veya aşağıdaki CSS sınıfları aşağıda özelliklerini değiştirmek/seçiciler:

#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

float: left, .leftRapper'a ekleyebilir/eklemelisiniz.

Diğer seçenekler örn. .leftRapper için negatif bir sağ kenar boşluğu ekleyerek.