0

有人能解释一下我需要如何设置css语句来一个接一个地获取导航栏，没有任何可用空间吗？

还很容易知道，我如何在整个显示器上设置导航栏，它会自动在不同的屏幕分辨率上工作。

我尝试在 w3schools 上找到解决方案。

<div class="navbar">
            <ul>
                <li><a href="@" class="button">Compacts</a></li>
                <li><a href="@" class="button">Coupes</a></li>
                <li><a href="@" class="button">Sedans</a></li>
                <li><a href="@" class="button">Sports</a></li>
                <li><a href="@" class="button">Sports Classics</a></li>
                <li><a href="@" class="button">Super</a></li>
                <li><a href="@" class="button">Muscle</a></li>
                <li><a href="@" class="button">Off-Road</a></li>
                <li><a href="@" class="button">SUVs</a></li>
                <li><a href="@" class="button">Vans</a></li>
                <li><a href="@" class="button">Industrial</a></li>
                <li><a href="@" class="button">Commercial</a></li>
                <li><a href="@" class="button">Utility</a></li>
                <li><a href="@" class="button">Motorcycles</a></li>
            </ul>
        </div>

/* css */

.navbar ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.navbar li {
    display: inline;
}

.navbar a {
    border: none;
    padding: 2px;
    margin: 0px;
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
}

.button:active {
    background-color: #f0a041;
    color: #ffff00;
}

.button:hover {
    background-color: #f0a041;
    color: #ffff00;
}

tr, th {
    border: none;
    text-align: right;
}
4

3 回答 3

1

添加负边距，您的问题将得到解决。
这是片段。
只需更改以下类的 css 属性。

.navbar li {
        display: inline;
        margin-right: -0.26rem;
    }

这肯定会解决你的问题。

于 2019-09-08T18:24:12.390 回答
0

只需将 float: left 添加到 li。

.navbar li {
        display: inline;
        float: left;
}
于 2019-09-08T18:25:36.920 回答
0

给 ul adisplay: flex和 a 标签 a white-space pre：

/* css */

.navbar ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  display: flex;
}

.navbar a {
  padding: 2px 5px;
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
  white-space:pre;
}

.button:active,
.button:hover {
  background-color: #f0a041;
  color: #ffff00;
}
<div class="navbar">
  <ul>
    <li><a href="@" class="button">Compacts</a></li>
    <li><a href="@" class="button">Coupes</a></li>
    <li><a href="@" class="button">Sedans</a></li>
    <li><a href="@" class="button">Sports</a></li>
    <li><a href="@" class="button">Sports Classics</a></li>
    <li><a href="@" class="button">Super</a></li>
    <li><a href="@" class="button">Muscle</a></li>
    <li><a href="@" class="button">Off-Road</a></li>
    <li><a href="@" class="button">SUVs</a></li>
    <li><a href="@" class="button">Vans</a></li>
    <li><a href="@" class="button">Industrial</a></li>
    <li><a href="@" class="button">Commercial</a></li>
    <li><a href="@" class="button">Utility</a></li>
    <li><a href="@" class="button">Motorcycles</a></li>
  </ul>
</div>

于 2019-09-08T18:30:45.810 回答