Nav杆间距

Question

我试图创建一个导航栏，其中的链接只有一个小空间的一行。当我尝试实现这一点时，它们会出现两行大空间，似乎无法改变这一点。

Answer 1

从你的评论和你提供的图片，我认为这是你想要的。

​

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

​

可编辑演示： http://jsbin.com/xojomi/2

Answer 2

我试图创建一个导航栏，其中的链接只有一个小空间的一行。

不要应用任何CSS。

例如：

​

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

​