Question

刚开始学习CSS已经有一个星期了，我对此有一个问题。我的页脚有一个导航栏，但我希望它能够响应，这样当它处于移动模式时，它将分成两行，每行两个按钮（总共4个按钮）。

试着弄清楚如何在数小时内完成这项工作，但似乎无法正常工作，不确定是否与我的按钮元素有关，但我确实想继续使用它。

这是我的HTML代码：

＆＃13;

<footer>
  <!-- include navigation buttons -->
  <nav id="navigation">
    <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">BACK</button>
    <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">MAP</button>
    <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">AREA</button>
    <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">NEXT</button>
  </nav>
</footer>

＆＃13;

我也很好奇：如果我想编辑按钮的设计（按钮之间的空间，按钮的宽度等等，我该怎么做呢？）

Answer 1

这样做：

#navigation div {
  display: inline-block;
}

<footer>
  <!-- include navigation buttons -->
  <nav id="navigation">
    <div>
      <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">BACK</button>
      <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">MAP</button>
    </div>
    <div>
      <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">AREA</button>
      <button class="nav-button" href="#" style="color: #000000; text-decoration: none;">NEXT</button>
    </div>
  </nav>
</footer>

另外，请参阅this小提琴。

我也很好奇：如果我想编辑按钮的设计（按钮之间的空间，按钮的宽度等等。我怎么样应该这样做？）

查看margin，padding，width，height等。这些都是基本属性，每本书的第一页都会介绍CSS。< / p>

Answer 2

你试过CSS flex吗？

flex有很多可能性。

选中此Example Code

Answer 3

为此可以使用bootstrap Grid。在小屏幕上，2个按钮将在一行中，在较大的屏幕中，它们将在一行中。

<footer>
  <!-- include navigation buttons -->
  <nav id="navigation">
    <div class="row">
      <button class="nav-button col-sm-6 col-md-3 col-lg-3" href="#" style="color: #000000; text-decoration: none;">BACK</button>
      <button class="nav-button col-sm-6 col-md-3 col-lg-3" href="#" style="color: #000000; text-decoration: none;">MAP</button>
      <button class="nav-button col-sm-6 col-md-3 col-lg-3" href="#" style="color: #000000; text-decoration: none;">AREA</button>
      <button class="nav-button col-sm-6 col-md-3 col-lg-3" href="#" style="color: #000000; text-decoration: none;">NEXT</button>
    </div>
  </nav>
</footer>

Answer 4

首先，使用<a>代替<button> ... href是<a>代码的属性，而不是<button>。

...要获得结果，您可以使用 Flexbox （它也会删除按钮之间的空格）

移动屏幕的

...和 media query 规则

...并为您的链接添加样式将css应用于.nav-button

Stack Snippet

＆＃13;

#navigation {
  display: flex;
  flex-wrap: wrap;
}

a.nav-button {
  flex-basis: 25%;
  background: #ececec;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  text-align: center;
}

@media (max-width:480px) {
  a.nav-button {
    flex-basis: 50%;
  }
}

＆＃13;

<footer>
  <!-- include navigation buttons -->
  <nav id="navigation">
    <a class="nav-button" href="#" style="color: #000000; text-decoration: none;">BACK</a>
    <a class="nav-button" href="#" style="color: #000000; text-decoration: none;">MAP</a>
    <a class="nav-button" href="#" style="color: #000000; text-decoration: none;">AREA</a>
    <a class="nav-button" href="#" style="color: #000000; text-decoration: none;">NEXT</a>
  </nav>
</footer>

＆＃13;

将导航按钮分成两行

4 个答案: