在線div不併排

-5

我在下面有下面的代碼。我有一個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>

來源

2017-07-26 Martin

請試試這個代碼，而不是display:inline-block;，只是添加float:left。

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

來源

2017-07-26 05:03:13

參考鏈接請解釋一點，爲什麼它沒有工作，爲什麼這項工作？ – Martin

有一點是div的大小，所有div標籤都出現在新行中，因此我們需要使用float來顯示兩行內容。 –

更多的原因是：內聯元素的典型特徵是它們尊重標記中的空白。請檢查此鏈接https://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements –

您可以使用float: left;代替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>

來源

2017-07-26 05:06:16

display:inline-block有默認white space，你需要刪除空白。否則，你需要relace的display-inline-block與float:left，有這麼多的選擇去除空白請檢查下面

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

來源

2017-07-26 05:13:42

在線div不併排

回答

相關問題