下拉按鈕？

Question

正如你可能聽說過我的其他問題，保證金 - 對CSS不起作用，我重新創建我的學校的網站主頁的樂趣。我在網站上很遠，我需要一些帶有下拉按鈕的CSS和HTML代碼。在其中一個下拉列表中，我希望內部鏈接並排排列，如7行和2列，用於14個鏈接。我簡直不知道如何讓他們這樣的，因爲他們一直在排隊了14行1列我的CSS和HTML代碼的按鈕如下

.dropbtn { 
 
     background-color: #2E64FE; 
 
     color: white; 
 
     padding: 16px; 
 
     font-size: 16px; 
 
     border: none; 
 
     cursor: pointer; 
 
    } 
 
    .dropdown { 
 
     position: relative; 
 
     display: inline-block; 
 
    } 
 
    .dropdown-content { 
 
     display: none; 
 
     position: absolute; 
 
     background-color: #f9f9f9; 
 
     min-width: 160px; 
 
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    } 
 
    .dropdown-content a { 
 
     color: black; 
 
     padding: 12px 16px; 
 
     text-decoration: none; 
 
     display: block; 
 
    } 
 
    .dropdown-content a:hover { 
 
     background-color: #f1f1f1 
 
    } 
 
    .dropdown:hover .dropdown-content { 
 
     display: block; 
 
    } 
 
    .dropdown:hover .dropbtn { 
 
     background-color: #2E2EFE; 
 
    }

<div class="dropdown"> 
 
    <button class="dropbtn">School Office</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Principles Office</a> 
 
    <a href="#">School Nurse</a> 
 

 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <button class="dropbtn">District office</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">SuperIndentents office</a> 
 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <button class="dropbtn">Departments</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Buissness Office</a> 
 
    <a href="#">Facilities</a> 
 
    <a href="#">Food Service</a> 
 
    <a href="#">Human Resources</a><a href="#">Transportation</a> 
 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <button class="dropbtn">Staff</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <button class="dropbtn">Family</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <button class="dropbtn">Teachers</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 3</a> 
 

 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <button class="dropbtn">Board</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div>

在教師下拉列表中，我希望它是行和列，而不僅僅是行。

Answer 1

剛剛拆分的鏈接成兩個獨立的div塊下拉容器內，並將其設置爲display:inline-block;：

<div class="one-side"> 
<a href="#">Link 1</a> 
<a href="#">Link 2</a> 
<a href="#">Link 3</a> 
<a href="#">Link 3</a> 
<a href="#">Link 3</a> 
<a href="#">Link 3</a> 
<a href="#">Link 3</a> 
</div> 
<div class="one-side"> 
<a href="#">Link 3</a> 
<a href="#">Link 3</a> 
<a href="#">Link 3</a> 
<a href="#">Link 3</a> 
<a href="#">Link 3</a> 
<a href="#">Link 3</a> 
<a href="#">Link 3</a> 
</div> 

CSS

.one-side{display:inline-block;} 

見琴：https://jsfiddle.net/pb10k9hj/1/