Fatal编程技术网
  • html/
  • HTML/CSS：我的div中的文本没有对齐？

HTML/CSS：我的div中的文本没有对齐？

html css

HTML/CSS：我的div中的文本没有对齐？,html,css,Html,Css,代码： <head> <meta charset="utf-8"> <title>Visit Clare</title> <style type="text/css"> body { width: 100%; margin: 0px; background-color: #F5F5F5; } #navigation { color: white;

代码：

<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>
我不明白为什么我的导航
div
中的文本没有对齐

<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>
我有导航左
div
和导航右
div
在导航中

<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>
navigationLeft中的文本高于navigationRight中的文本，原因我不知道。有人能指出我的错误吗？

在行动中（见全屏） 
<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>
有很多这样的解决方案：

<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>
  • 浮动（当前解决方案）
  • 内联块
  • 弯曲
  • 表单元格
正文{
宽度：100%；
边际：0px；
背景色：#F5；
}
#航行{
颜色：白色；
宽度：100%；
背景色：#292526；
位置：固定；
顶部：0px；
}
#导航ulli{
显示：内联；
}
#导航a{
字体大小：120%；
颜色：白色；
文字装饰：无；
}
#导航左{
浮动：左；
字号：180%；
}
#航行权{
浮动：对；
}


    

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  •
以下是固定代码： 

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


拜访克莱尔
身体{
宽度：100%；
边际：0px；
背景色：#F5；
}
#航行{
颜色：白色；
宽度：100%；
背景色：#292526；
位置：固定；
顶部：0px；
}
#导航ulli{
显示：内联；
}
#导航a{
字体大小：120%；
颜色：白色；
显示：内联；
}
#导航a{
字体大小：120%；
颜色：白色；
文字装饰：无；
}
#导航左{
字号：180%；
显示：内联块
}
#航行权{
浮动：对；
宽度：300px；
}

    

  • 



    

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  •
那是因为他们在不同的
ul
sSorry，我没有注意到那里的小勾号。在我看来，这不是很直观。顺便说一句，谢谢你的帮助，我真的很感激。我看到这两组文本是如何在同一行开始的。我怎样才能把右边的文字放在左边的文本的中心，而不是正好在同一行上。请在一分钟内检查我的更新答案。请考虑接受SOF的答案，感谢人们花在你们的问题上的时间和精力。我非常感谢你们的帮助。非常感谢你，我有你的答案。请你给我答复好吗？你们这些人不接受答案吗？你的答案：检查更新的答案，马上