导航条换行，当它不应该't

nav bar wrapping when it shouldn't

本文关键字：不应该 换行 导航      更新时间：2023-09-26

我做了一个导航栏，宽度为1000px，里面有4个250px宽的链接。我还将所有元素的内边距和边距设置为0。但由于某些原因，元素仍然换行到另一行，当我把宽度降低到247px或更小，他们都显示在同一行，但他们换行到248或更多。这是我的css:

*
{
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.container
{
    border: 1px solid;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.menu-container
{
    min-height:60px;
}
nav a, a:link, a:visited
{
    color: #000000;
    display: inline-block;
    font-size: 60px;
    line-height: 60px;
    text-decoration: none;
    width: ###px;
    text-align: center;
}
nav a:hover
{
    background-color: #000000;
    color: #FFFFFF;
}

当###小于等于247时，它们全部显示在一行，当###大于等于248时，它们换行。

这是我的html:

<div class="container">
  <div class="menu-container">
    <nav>
      <a href="/">Home</a>
      <a href="/games">Games</a>
      <a href="/tags">Tags</a>
      <a href="/scores">Scores</a>
    </nav>
  </div>
</div>

我真的希望他们每个是250px宽，这样他们占用整个导航栏的宽度(设置他们247px不占用整个导航栏)，但我不希望他们换行。有人知道是什么问题吗?

使用inline-block时，将考虑空白

<div class="container">
  <div class="menu-container">
    <nav>
      <a href="/">Home</a><!-- white space here -->
      <a href="/games">Games</a><!-- white space here -->
      <a href="/tags">Tags</a><!-- white space here -->
      <a href="/scores">Scores</a><!-- white space here -->
    </nav>
  </div>
</div>

一个简单的修改是

<nav>
  <a href="/">Home</a><a href="/games">Games</a><a href="/tags">Tags</a><a href="/scores">Scores</a>
</nav>

你也可以考虑改进你的HTML。当您试图显示用于导航的链接列表时，请考虑使用ul和li

典型案例

苹果

ul {
display: table;
width: 845px;
table-layout: fixed;
}
li {
display: table-cell;
width: 100%;
overflow: hidden;
}
a{
display;block
}
雅虎

ul{
white-space: nowrap;
overflow: hidden;
}
li {
display: inline-block;
}
相关文章：