为什么将float布局换成Inline-block布局后inline-block不在同一条线上? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

为什么将float布局换成Inline-block布局后inline-block不在同一条线上?

2016-06-13 13:30:24 2244 1

这是float布局的导航栏,显示正常
代码如下:
screenshot
screenshot
screenshot
screenshot

<html>
<head>
<meta charset="UTF-8">
    <style>
    body {
    margin: 0;
    border: 0;
    padding: 0;
    font-family: "Microsoft YaHei UI";
    font-size: 16px;
    }

    .navbar {
        background: rgba(0, 0, 0, 1);
        border: none;
        padding: 0 100px;
        color: #ffffff;
    }

    .navbar .navbar-header,.navbar-content{
        display: inline-block;
    }

    .navbar a:visited, a:link, a:active, a:hover {
        color: #ffffff;
        text-decoration: none;
    }

    .navbar .navbar-header .navbar-brand {
        font-weight: bolder;
        text-decoration: none;
        color: inherit;
        padding: 1.25rem;
        display: inline-block;
    }

    .navbar .navbar-content [class^='navbar-list'] {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .navbar .navbar-content [class^='navbar-list'] > li {
        float: left;
        padding: 0 1.5rem;
        color: #ffffff;
        transition: all 500ms;
        line-height: 4rem;
    }
    
    .navbar .navbar-content [class^='navbar-list'] > li:hover {
        background-color: #8CA6DB;
        cursor: pointer;
    }
    </style>
</head>
<body>
<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="/">ZERO</a>
    </div>
    <div class="navbar-content">
        <ul class="navbar-list">
            <li><a href="/">Hello World!</a></li>
            <li><a href="/">JS组件</a></li>
            <li><a href="/">CSS特效</a></li>
            <li><a href="/">NodeJS模块</a></li>
        </ul>
    </div>
</nav>
</body>
</html>

效果如下:

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:35:42

    .navbar .navbar-header, .navbar-content加个{vertical-align: middle;},该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

    0 0
相关问答

1

回答

python中A NumPy函数float128类型是什么?

2021-11-29 22:59:43 150浏览量 回答数 1

1

回答

Python数字类型转换float(a)是什么?

2021-11-17 22:17:46 549浏览量 回答数 1

1

回答

python中表达式 type(3) in (int, float, complex) 的值是什么?

2021-11-02 23:51:47 995浏览量 回答数 1

1

回答

Python表达式for x in [1, 2, 3]: print x,的输出结果是什么?

2021-11-04 22:18:58 221浏览量 回答数 1

1

回答

Python float()方法的语法是什么?

2021-10-31 20:17:20 151浏览量 回答数 1

1

回答

Flink 如何实现 Checkpoint 的 EXACTLY_ONCE 语义

2021-01-05 23:23:15 944浏览量 回答数 1

1

回答

checkpoint exactly once。 只有一个流, 多个并发之间会存在需要对齐的问题

2020-04-20 21:22:26 1257浏览量 回答数 1

0

回答

Python-无法将float转换为numpy数组

2019-09-25 16:01:31 477浏览量 回答数 0

1

回答

css float的问题?

2016-06-07 13:47:31 1670浏览量 回答数 1

1

回答

包含 float 的 inline-block 对齐问题原理详解?

2016-05-26 16:41:44 2004浏览量 回答数 1
+关注
杨冬芳
IT从业
文章
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载