下拉按钮？

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/