-RESOLVED- Wie verhindere ich, dass der [div] beim Anklicken aus der Box springt?

Question

Es fehlte dieses Stück Code. [Rand: 0 0 0 2px; clear: left;]

Der 1.-Codefloat:left;margin:display:inline-block;vertical-align die 2.-Code verwendet nutzt auch die 1.-Code</br> Tags verwendet, ohne sie, die sie auseinander fallen würde.

Der 2.-Code nicht auseinander kommen, wenn Sie Text vergrößern, die 1.-Code tut.

-Code 1.) Wenn Sie auf die div hier klicken bleibt es in der Box http://www.cssdesk.com/DQJFx

Image: http://i.imgur.com/d2vrV4I.png

-Code 2.) Wenn Sie auf den div hier klicken es heraus springt der Box. Wie verhindere ich, dass es mit diesem Code aus der Box springt? Wie würde ich dann 2px nach rechts verschieben, weil es so weit weg ist? http://www.cssdesk.com/GmM8L

Image: http://i.imgur.com/45BEoL3.png

<a href="" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0; color:#000000; border-top-left-radius:50px;"></a> 

<a href="" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a> 

<a href="" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a> 

<a href="" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a> 

<a href="" style="float:left;margin:2px; width: 50px; height: 50px;background-color:#edc951;color:#000000; border-top-right-radius:50px"></a> 

<div style="width:266px" onclick="myObject=document.getElementById('myObj'); myObject.style.display='block'; this.style.display='none'"> 
<a style="float:left;margin:2px; width: 88px; height: 24px; cursor: pointer; background-color:#ffffff; color:#000000; 
border-left:89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px;"> </a> 
</div> 

<div id="myObj" style="display: none;"> 

</div> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0;color:#000000; clear:left;" onmouseover="this.style.backgroundColor='#abe9f7'" onmouseout="this.style.backgroundColor='#00a0b0'"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c;color:#000000;" onmouseover="this.style.backgroundColor='#badac5'" onmouseout="this.style.backgroundColor='#6a4a3c'"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f; color:#000000;" onmouseover="this.style.backgroundColor='#b7ab9d'" onmouseout="this.style.backgroundColor='#cc333f'"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;" onmouseover="this.style.backgroundColor='#4679c7'" onmouseout="this.style.backgroundColor='#eb6841'"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951; color:#000000;" onmouseover="this.style.backgroundColor='#45bf21'" onmouseout="this.style.backgroundColor='#edc951'"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0;color:#000000; clear:left;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0;color:#000000; clear:left;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c;color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0;color:#00a0b0; clear:left;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c;color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0; color:#000000; clear:left; border-bottom-left-radius:50px;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c;color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a> 

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951;color:#000000; border-bottom-right-radius:50px;"></a> 

Answer 1

Es fehlte dieses Stück Code. [Rand: 0 0 0 2px; clear: left;]

Answer 2

Sie sollten unterschiedliche Ränder für Ihre <a> Elemente verwenden.

Für die ersten fünf, verwenden Sie diese: margin: 2px 2px 0 2px;

Zum 6. (innerhalb des div): margin: 0;

Für die nächsten fünf: margin: 0 2px 2px 2px;

Margins (und Polsterungen) angewendet im Uhrzeigersinn in die Reihenfolge: oben rechts unten links.