<a> not displaying in block format</a>

Question

我有一个带有三个<a>标签的导航栏，这些标签构成了链接到不同页面的按钮。我目前正致力于网站的动员，由于某种原因，我不能让下拉列表以块格式显示按钮。

我的代码：

 <span class="nav navbar-nav inline">
      <a href="#page-top" class="navbuttons"></a>
      <a href="contact" class="navbuttons">Contact</a>
      <a href="aboutus" class="navbuttons">About Us</a>
      <a href="projects" class="navbuttons">Projects</a>
 </span>

 .navbuttons {
      font-size: 24px;
  display: inline-block;
  float: right;
  clear: left;
  margin-right: 24px;
  padding-right: 10px;
  padding-left: 10px;
  margin-top: 10px;
  color: white;
  font-weight: 700;
 }

 @media (max-width: 768px) {
      a.navbuttons {
           display: block;
      }
 }

Answer 1

您还需要移除float以获取block元素的预期行为（假设您需要它们在移动设备中垂直堆叠）

@media (max-width: 768px) {
  a.navbuttons {
       display: block;
       float:none;
  }
}

Demo