-RESOLVED-クリックすると[div]がボックスから飛び出さないようにするにはどうすればよいですか？

Question

このコードが欠けていました。 [margin：0 0 0 2px;クリア：左;]

を第一コードがdisplay:inline-block;vertical-align第2のコードが第一コードはそれらなしで、それがバラバラになり</br>タグを使用し、また、float:left;margin:を使用しています使用しています。

あなたは第一コードはない、でテキストを拡大すると第2のコードは離れて来ません。

あなたはそれが箱http://www.cssdesk.com/DQJFx

画像にとどまるここにdiv要素をクリックして、コード1）：http://i.imgur.com/d2vrV4I.png

コード2）あなたはdiv要素をクリックすると、ここでそれが飛び出しますボックスの。このコードを使用してボックスから飛び出すのを防ぐにはどうすればよいですか？また、この1つでは、どうすればそれを2倍以上右に移動するのでしょうか？ http://www.cssdesk.com/GmM8L

画像：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

このコードはありませんでした。 [margin：0 0 0 2px;クリア：左;]

Answer 2

あなたの<a>要素に別の余白を使用する必要があります。今後5についてmargin: 0;

：（DIV内部）6についてmargin: 2px 2px 0 2px;

：最初の5つについて

は、これを使用margin: 0 2px 2px 2px;

マージン（及びパディング）が時計回りに適用されます次の順序：右上の左下。