オンライン部門が並んでいない

Question

私は以下のコードを持っています。私は2つの内部divと1つのコンテナdivを持っています。私は2つの内側のdivが並んでいるようにしたいので、私は2つのdivのインラインブロックを使用しました。また、私は2つの部門がトップにスタートしたい。下のデモでは、彼らは一番上に立ち往生しているのですが、私自身のプロジェクトでは並んでいるのですが、最初のdivは上に、二番目のdivは上から始まらないのです。

コンテナ内の2divを左右に並べて表示するには、どのCSSスタイルが最適ですか？

2つのdivを並べるにはどうすればいいですか？

.homissync { 
 
    display: block; 
 
    height: 100%; 
 
} 
 

 
.homissync>div { 
 
    padding: 27px; 
 
    margin: 3px; 
 
    display: inline-block; 
 
} 
 

 
#homissyncbuttons { 
 
    height: 100vh; 
 
    width: 20%; 
 
    margin: 3px; 
 
} 
 

 
#homissynclist { 
 
    height: 100vh; 
 
    margin: 3px; 
 
    width: 68%; 
 
} 
 

 
#homissyncbuttons .libuttons { 
 
    width: 100% !important; 
 
    background-color: #ff0000; 
 
} 
 

 
.vBorder { 
 
    border: solid 1px #ddd; 
 
} 
 

 
button, input[type=submit] { 
 
    padding: 8px 20px; 
 
    color: #fff; 
 
    text-shadow: 0 0 2px rgba(0,0,0,0.35); 
 
    background-color: orange; 
 
    font-size: 0.9rem; 
 
    font-weight: bold; 
 
    border-radius: 3px; 
 
    border: 0; 
 
    outline: none !important; 
 
    margin: 3px 0; 
 
    cursor: pointer; 
 
    transition: background 1s ease-in-out; 
 
}

<div class=" homissync"> 
 
    <div id="homissyncbuttons" class=" vBorder"> 
 
    <ul> 
 
     <li> 
 
     <button class="libuttons">UACS</button> 
 
     </li> 
 
     <li> 
 
     <button class="libuttons">Medicine</button> 
 
     </li> 
 
     <li> 
 
     <button class="libuttons">Non-Drugs</button> 
 
     </li> 
 
     <li> 
 
     <button class="libuttons">Miscellaneous</button> 
 
     </li> 
 
    </ul> 
 

 

 

 
    </div> 
 
    <div id="homissynclist" class=" vBorder"> 
 
    <button class="listbuttons" id="new_uacs_entry">New UACS Entry</button> 
 
    <button class="listbuttons" id="update_uacs_entry">Update UACS Entry</button> 
 
    <div id="homissynclistresult" class=" vPadding vBorder"> 
 

 

 

 
    </div> 
 

 
    </div> 
 

 
</div>

Answer 1

代わりdisplay:inline-block;のこのコードを試してみて、ちょうどfloat:leftを追加してください。

.homissync>div { 
    display: block; 
    float: left; 
} 

Answer 2

あなたの代わりにdisplay: inline-block;

.homissync { 
 
    display: block; 
 
    height: 100%; 
 
} 
 

 
.homissync>div { 
 
    padding: 27px; 
 
    margin: 3px; 
 
    float:left; 
 
} 
 

 
#homissyncbuttons { 
 
    height: 100vh; 
 
    width: 20%; 
 
    margin: 3px; 
 
} 
 

 
#homissynclist { 
 
    height: 100vh; 
 
    margin: 3px; 
 
    width: 65%; 
 
} 
 

 
#homissyncbuttons .libuttons { 
 
    width: 100% !important; 
 
    background-color: #ff0000; 
 
} 
 

 
.vBorder { 
 
    border: solid 1px #ddd; 
 
} 
 

 
button, input[type=submit] { 
 
    padding: 8px 20px; 
 
    color: #fff; 
 
    text-shadow: 0 0 2px rgba(0,0,0,0.35); 
 
    background-color: orange; 
 
    font-size: 0.9rem; 
 
    font-weight: bold; 
 
    border-radius: 3px; 
 
    border: 0; 
 
    outline: none !important; 
 
    margin: 3px 0; 
 
    cursor: pointer; 
 
    transition: background 1s ease-in-out; 
 
}

<div class=" homissync"> 
 
    <div id="homissyncbuttons" class=" vBorder"> 
 
    <ul> 
 
     <li> 
 
     <button class="libuttons">UACS</button> 
 
     </li> 
 
     <li> 
 
     <button class="libuttons">Medicine</button> 
 
     </li> 
 
     <li> 
 
     <button class="libuttons">Non-Drugs</button> 
 
     </li> 
 
     <li> 
 
     <button class="libuttons">Miscellaneous</button> 
 
     </li> 
 
    </ul> 
 

 

 

 
    </div> 
 
    <div id="homissynclist" class=" vBorder"> 
 
    <button class="listbuttons" id="new_uacs_entry">New UACS Entry</button> 
 
    <button class="listbuttons" id="update_uacs_entry">Update UACS Entry</button> 
 
    <div id="homissynclistresult" class=" vPadding vBorder"> 
 

 

 

 
    </div> 
 

 
    </div> 
 

 
</div>

Answer 3

display:inline-blockのfloat: left;を使用することができますが、デフォルトwhite spaceを持っている、あなたはホワイトスペースを削除する必要があります。そうでなければ、float:leftとdisplay-inline-blockをrelaceする必要があり、非常に多くの

Why is there an unexplainable gap between these inline-block div elements?