下拉按钮？

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/