在行动中（参见全屏）

Question

代码：http://pastebin.com/mtLHtjar

我不明白为什么我的导航 div中的文字没有排成一行。

我在导航中有 navigationLeft div和 navigationRight div。

navigationLeft 中的文字位于 navigationRight 中的文字上方，原因是我不知道。有人可以指出我的错误吗？

Answer 1

在行动中（参见全屏）

有很多解决方案，如：

Float（当前解决方案）
内联块
的Flex
表细胞

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按预期工作，您需要删除两个元素之间的额外空间。如果你添加像

这样的空格

空间
标签
newine（这是你的情况）

他们之间会出现差距。

根据具体情况，您可以使用以下任一方法消除差距：

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

我建议您使用 Number 1 方法（将主题放在一行中），但两种方法都可以使用。

Answer 2

这是固定代码：

<head>
<meta charset="utf-8">
<title>Visit Clare</title>
<style type="text/css">
    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;           
        display: inline;
    }

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

    #navigationLeft {
        font-size: 180%;
        display:inline-block
    }

    #navigationRight {
         float:right;
         width:300px;
    }
</style>
</head>

<body>
<div id="container">
    <div id="navigation">
        <ul id="navigationLeft">
            <li><a href="#">Visit Clare Ireland</a></li>
        </ul>

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

</html>

HTML / CSS：我的div中的文字没有排队？

2 个答案:

在行动中（参见全屏）

更新

更新2