Question

我正在尝试创建一个导航栏，其中链接仅由一行上的小空格分隔。当我尝试实现这一点时，他们会进入两行大空间，但似乎无法改变这一点。

Answer 1

我正在尝试创建一个导航栏，其中链接仅由一行上的小空格分隔。

不要申请任何CSS。

例如：

＆＃13;

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

＆＃13;

Answer 2

根据您提供的评论和图片，我认为这就是您要找的内容。

＆＃13;

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

＆＃13;

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

＆＃13;

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

导航栏间距

2 个答案: