css - 链接不会留在导航栏内

Question

链接超出了导航栏，因为它太高了（我认为），我希望这些项目彼此分开。

#navbar {
    height: 21px;
    width: 100%;
    top: 200px;
    text-align: center;
    font-size: 20px;
}

哦，这是 HTML：

<div id="navbar">
          {block:AskEnabled}
          <div class="navitem"><a href="/ask">{AskLabel}</a></div class>
          {/block:AskEnabled}
          {block:SubmissionsEnabled}
          <div class="navitem"><a href="/submit">{SubmitLabel}</a></div class>
          {/block:SubmissionsEnabled}
           <div class="navitem"><a href="{text:Link 1 Path}">{text:Link 1}</a></div class><div class="navitem"><a href="{text:Link 2 Path}">{text:Link 2}</a></div class><div class="navitem"><a href="{text:Link 3 Path}">{text:Link 3}</a></div class>


          </div id="navbar">

忽略括号中的东西，比如 AskLabel 和 div 类 navitem，我把它去掉了：P

Answer 1

因为您的链接在divs 中，它们是块元素，所以每个 .s 之间有一个分页符div。您需要在元素上使用类似 aspan或 set的东西。display: inlinenavitem div

见例子：http: //jsfiddle.net/7dPkQ/3/

编辑澄清：spans 默认情况下已display: inline设置。divs 默认已display: block设置。inline在您的示例中，如果链接包含在元素中，它们将并排放置。另见http://www.w3schools.com/cssref/pr_class_display.asp