Question

我正在尝试使用HTML制作水平图标栏。我正在使用以下代码，并且100％可以，但是，使用Firefox，如果我缩小三倍，则最后一个“图标”会换行。

该如何解决？

.icon-bar {
  z-index: 9999999999;
  width: 336px;
  background-color: #EFEFEF;
  overflow: auto;
  /* Overflow due to float */
}

.icon-bar a {
  float: left;
  /* Float links side by side */
  text-align: center;
  /* Center-align text */
  width: 13.6%;
  /* Equal width */
  padding: 6px 0;
  /* Some top and bottom padding */
  transition: all 0.3s ease;
  /* Add transition for hover effects */
  color: navy;
  border-left: 1px solid navy;
  border-right: 1px solid navy;
  font-size: 20px;
}

<div class="icon-bar">
  <a href="#">A</a>
  <a href="#">B</a>
  <a href="#">C</a>
  <a href="#">D</a>
  <a href="#">E</a>
  <a href="#">F</a>
  <a href="#">G</a>
</div>

Answer 1

这确实与它没有响应有关。您应该使用媒体查询来更改.icon-bar的宽度。

以下是媒体查询中的示例：

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

您可以在此处了解有关查询的更多信息：Media Queries

如何使用HTML制作水平图标栏

1 个答案: