我在下面有下面的代碼。我有一個2內部div的容器div。我想要兩個內部div並排,所以我在兩個div上使用了內嵌塊。另外我希望兩個div都可以在最上面開始。在下面的演示中,他們被困在頂端,我不知道爲什麼在我自己的項目中他們並排,但第一個div在頂端開始,而第二個div不在頂端開始。在線div不併排
什麼是最好的CSS風格,使2個div在容器中始於頂部而並排?
什麼是最好的方式來並排兩個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>
參考鏈接請解釋一點,爲什麼它沒有工作,爲什麼這項工作? – Martin
有一點是div的大小,所有div標籤都出現在新行中,因此我們需要使用float來顯示兩行內容。 –
更多的原因是:內聯元素的典型特徵是它們尊重標記中的空白。請檢查此鏈接https://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements –