AI 助理
备案控制台
开发者社区 问答 正文

css中inline-block样式的问题

对于这样一段代码：

<div>
    <div style='display:inline-block; width:20px; height:20px; background:red;'></div>
    <div style='display:inline-block'>00:00</div>
</div>

screenshot

展开
收起
a123456678 2016-03-25 15:58:15 2053 分享 版权

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

1 条回答
写回答
取消 提交回答
  • a123456678

    两个并列的 inline-block 默认是基线对齐的，可以通过设置 vertical-align 属性使其顶部对齐。
    将 vertical-align 设为 top 即可。
    而且你的图是有问题的，00:00 应该默认与左侧的红色 div 基线是对齐的，如下：
    screenshot

    2019-07-17 19:14:35
    赞同 展开评论
问答分类：
前端开发
问答标签：
CSS样式 CSS inline-block
问答地址：
开发者社区 > 开发与运维 > 问答
相关问答
在css开发中如何引用样式文件？
2023
1
0
CSS的语言特点中丰富的样式定义是什么呀？
474
1
0
除了CSS3，还有什么方法能使元素从一种样式变换为另一种样式时为元素添加效果？
571
1
0
css样式中怎样额外插入文本呢？
1202
1
0
css样式中地址的格式是怎么样的呢？
3031
1
0
如何学习运用全局CSS样式
2277
1
0
如何概览全局CSS样式？
823
1
0
Bootstrap 全局 css 样式-表单3中如何控件尺寸？
571
1
0
Bootstrap 全局 css 样式-表单3的只读状态指什么？
677
1
0
为什么要在Bootstrap 全局 css 样式-表单3设置禁用状态？
637
1
0