CODEWITHSUNDEEP
javascripthtmlcss
semicolon
semicolon

Reputation: 2580

nav bar wrapping when it shouldn't

I made a nav bar with width 1000px with 4 250px wide links within it. I also have set padding and margin of all the elements to 0. But for some reason the elements still wrap onto another line, when I lower the width to 247px or less they are all displayed on the same line but they wrap on 248 or more. This is the css I have:

*
{
    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;
}

When ### is 247 or less they all display on one line, when it is 248 or more they wrap.

And here is the html I have:

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

I really want them to be 250px wide each so that they take up the whole width of the nav bar (setting them to 247px doesn't take up the whole nav bar) but I do not want them to wrap. Does anyone have any idea what the issue is?

Upvotes: 0

Views: 59

Answers (1)

sabithpocker
sabithpocker

Reputation: 15566

When using inline-block whitespace will be considered

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

One simple fix would be

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

You can as well think of improving your HTML. As you are trying to display a list of links used for navigation, consider using ul and li

Update

Some typical cases

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;
}

Upvotes: 2

Related Questions