Question

我制作了一个宽度为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>

我真的希望它们各自宽250微米，以便它们占据导航栏的整个宽度（将它们设置为247px并不占用整个导航栏）但我不希望它们包装。有谁知道这是什么问题？

Answer 1

使用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

<强>更新

一些典型案例

<强> Apple

ul {
display: table;
width: 845px;
table-layout: fixed;
}

li {
display: table-cell;
width: 100%;
overflow: hidden;
}

a{
display;block
}

<强> Yahoo

ul{
white-space: nowrap;
overflow: hidden;
}
li {
display: inline-block;
}

导航栏包装时不应该

1 个答案: