html - HTML/CSS:我的div中的文本未对齐？

代码：http://pastebin.com/mtLHtjar
我不明白为什么导航div中的文本没有排成一行。
我在导航中有左导航div和右导航div。
navigationLeft中的文本位于navigationRight中的文本之上，原因我不知道。有人能指出我的错误吗？

最佳答案

实际操作（见全屏）
有很多解决方案，比如：
浮子（电流溶液）
内联块
弯曲
表格单元格

body {
  width: 100%;
  margin: 0px;
  background-color: #F5F5F5;
}

#navigation{
  color: white;
  width: 100%;
  background-color: #292526;
  position: fixed;
  top: 0px;
}

#navigation ul li {
  display: inline;
}

#navigation a {
  font-size: 120%;
  color: white;
  text-decoration: none;
}

#navigationLeft {
  float: left;
  font-size: 180%;
}

#navigationRight {
  float: right;
}

<div id="container">
  <div id="navigation">
     <div id="navigationLeft">
        <a href="#">Vist Clare Ireland</a>
     </div>
     <ul id="navigationRight">
        <li><a href="#">Home |</a></li>
        <li><a href="#">News |</a></li>
        <li><a href="#">Contact |</a></li>
        <li><a href="#">About |</a></li>
        <li><a href="#">Hotels |</a></li>
        <li><a href="#">Bars |</a></li>
        <li><a href="#">Restaurants |</a></li>
        <li><a href="#">Map |</a></li>
        <li><a href="#">Transport</a></li>
     </ul>
   </div>
</div>

你可以在他们身上寻找更多的资料。
更新
这是完成问题作者最后评论的更新：
你应该使用display: inline-block来达到这个目的

#navigation{
  color: white;
  width: 100%;
  background-color: #292526;
  position: fixed;
  top: 0px;
}
#navigationLeft {
  width: 30%;
  display: inline-block;
  vertical-align: middle;
  font-size: 180%;
}

#navigationRight {
  width: 70%;
  display: inline-block;
  vertical-align: middle;
}
#navigation ul{
  float: right;
}
#navigation ul li {
  display: inline;
}

#navigation a {
  font-size: 120%;
  color: white;
  text-decoration: none;
}

<div id="navigation">
  <div id="navigationLeft">
     <a href="#">Vist Clare Ireland</a>
  </div><div id="navigationRight">
    <ul>
      <li><a href="#">Home |</a></li>
      <li><a href="#">News |</a></li>
      <li><a href="#">Contact |</a></li>
      <li><a href="#">About |</a></li>
    </ul>
  </div>
</div>

更新2
要使inline-block按预期工作，您需要删除两个元素之间的额外空间。如果您添加一个空格，如
空间
制表符
纽恩（这是你的案子）
它们之间会出现一个缺口。
根据具体情况，可以使用以下任一方法来消除间隙：
1-将主题放在一行中

    <input type="text"><input type="text"><input type="text">

2-移除空间（别担心，这是正确的！:) )

    <input type="text"><
    input type="text"><
    input type="text">

3-使用HTML注释

    <input type="text"><!--
    --><input type="text">

我建议你使用数字1的方法（把主题放在一行），但两者都可以。