css 问题求助,如何将导航的几个li 元素排在一行

benniu
  • 32

想不借助其它的UI库弄个导航条。
不料这几个li 死活不在一条线上,显得导航条,高度很高。
有没有大佬帮助修整一下?谢谢了。
HTML 代码如下

`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>My Application</title>
   
    <style>
        .panel-primary{
            background-color: blue;
            border-color:blue;
            border-radius: 4px;
        }
        .panel-primary>.panel-heading{
            background-color: blue;
            border-color:blue;
        }
        .nav>li>a:focus, .nav>li>a:hover {
            text-decoration: none;
            background-color: transparent;
        }
        .nav>li>a{
            color:#fff;
            padding-top: 10px;
            padding-right: 15px;
            padding-bottom: 10px;
            padding-left: 15px;
            text-decoration: none;
            line-height: 20px;
            display: block;
            font-size: 14px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        
    </style>
    
    
    
    
</head>
<body style="margin: 0;">
    <div class="panel panel-primary" style="float:left;width:100%;margin:0">
        <div id="divNavbar" class="panel-heading nav navbar-nav" style="padding:0;width:100%">
            <li><a href="/"  target="_blank"><img height="20px" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3110425869,3098497915&fm=26&gp=0.jpg"></a></li>
            <li><a href="/" target="_blank" style="color:#fff">My Application</a></li>
            <li style="float:right"><a target="_blank" style="color:#fff" href="https://www.bing.com">Bing</a></li>
            <li style="float:right"><a target="_blank" style="color:#fff" href="https://www.google.com"></a></li>
            <li style="float:right"><a href="https://www.baidu.com" target="_blank" style="color:#fff">Biadu</a></li>
        </div>
    </div>

</body>
</html>

`

回复
阅读 542
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏