CODEWITHSUNDEEP
htmlcss
NewCoder2015
NewCoder2015

Reputation: 47

Nav bar spacing

I'm trying to create a nav bar where the links are only separated by a small space on one line. When I try to implement this they go onto two lines with large spaces and can't seem to change this.

Upvotes: 1

Views: 112

Answers (2)

Zaqx
Zaqx

Reputation: 1442

From your comments and the pictures you provided I think this is what you are looking for.

/* Reset Browser Default Styles
-------------------------------------- */
* { margin:0; padding:0 }


/* General Styles
-------------------------------------- */
body {
  font: 12px/1.2 Verdana, serif;
}

header {
  background: #5D2C2C;
  padding: 10px;
  /* lay out content from right to left */
  text-align: right;
}

a {
  color: white;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}



/* Nav Styles
-------------------------------------- */
nav > * {
  display: inline-block;
  /* nav text should be left to right */
  text-align: left;
}

nav menu {
  /* dropdown menus need to be on top of page content */
  position: absolute;
  z-index: 1;
  
  /* make them look nice */
  padding: 10px;
  background: #5D2C2C;
  
}

/* Show/hide the dropdown menu */
nav menu a {
  display: block;
}
nav a + menu {
  display: none;
}
nav a:hover + menu,
nav a + menu:hover {
  display: block;
}
<header>
  <nav>
    <a href="#introduction">Introduction</a>
    <a href="#history">History</a>
    <a href="#national_flags">National Flags</a>
    <span>
      <a href="#maritime_signal_flags">International Maritime Signal Flags</a>
      <menu>
        <a href="#maritime_signal_letters">Maritime Signal: Letters</a>
        <a href="#maritime_signal_numbers">Maritime Signal: Numbers</a>
      </menu>
    </span>
  </nav>
</header>

Editable demo: http://jsbin.com/xojomi/2

Upvotes: 1

Zaqx
Zaqx

Reputation: 1442

I'm trying to create a nav bar where the links are only separated by a small space on one line.

Don’t apply any CSS.

For example:

<a href="">Link1</a>
<a href="">Link2</a>
<a href="">Link3</a>
<a href="">Link4</a>

Upvotes: 1

Related Questions