コンテナ内の要素がインラインでない

Question

コンテナ内の他の要素とインラインで最初の要素が一致しないのはなぜですか？なぜそれがそれをやっているのか分かりません。スニペットは機能しますが、ウェブページでスニペットを実行すると表示されません。何が原因でこのことが起こるのでしょうか？解決の問題の下に追加

.search { 
 
    background-color: #2a7a2e; 
 
    border: none; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 12px; 
 
    margin-top: 4px; 
 
    cursor: pointer; 
 
    width: 60px; 
 
    height: 20px; 
 
    } 
 
.searchtag { 
 
    margin: 4px; 
 
    width: 100px; 
 
    height: 20px; 
 
    font-size: 12px; 
 
    } 
 
cloudcontainer { 
 
    width: 940px; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    float: left; 
 
} 
 

 
cloudcontainer:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.tagcloud { 
 
    background-color: #2a7a2e; 
 
    border: none; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 12px; 
 
    margin: 2px 2px 2px 2px; 
 
    cursor: pointer; 
 
    float: left; 
 
    width: auto; 
 
    height: 20px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
}

<form id="search"> 
 
<input class="searchtag" type="text" id="search" name="search"> 
 
<button class="search" type="submit" formaction="go.php" 
 
method="GET">Search</button> 
 
</form> 
 

 
<cloudcontainer> 
 
    <form id="search"><button class="tagcloud" type="submit" formaction="go.php" method="GET">zzz</button> 
 
    <input type="hidden" id="search" name="search" value="zzz"></form> 
 
    <form id="search"><button class="tagcloud" type="submit" formaction="go.php" method="GET">aa</button> 
 
    <input type="hidden" id="search" name="search" value="aa"></form> 
 
    <form id="search"><button class="tagcloud" type="submit" formaction="go.php" method="GET">aaa</button> 
 
    <input type="hidden" id="search" name="search" value="aaa"></form> 
 
</cloudcontainer>

Answer 1

。

<form style="margin: 0; padding: 0;">