CSS display inline-block inline 顶到下面找不出原因

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 3843 days ago, the information mentioned may be changed or developed.

不管是 inline-block ，还是 inline ，都会往下飘～，只有设置 float 才能正常，望赐教原因

saas

<section class="how_width" id="cat-index"> <div class="cat-one-block cat-longer"> <dl> <dt class="cat-i-title"> <i class="vertically-index-line c-i-t-0"></i> <div class="cat-i-title-name">按类型</div> </dt> <dd></dd> </dl> </div> <div class="cat-one-block cat-longer"> <dl> <dt class="cat-i-title"> <i class="vertically-index-line c-i-t-0"></i> </dt> <dd></dd> </dl> </div> <div class="cat-one-block cat-shorter"> <dl> <dt class="cat-i-title"> <i class="vertically-index-line c-i-t-0"></i> </dt> <dd></dd> </dl> </div> <div class="cat-one-block cat-shorter"> <dl> <dt class="cat-i-title"> <i class="vertically-index-line c-i-t-0"></i> </dt> <dd></dd> </dl> </div&t; </section>

#cat-index { height: 120px; } #cat-index::after { content: ""; display: block; clear: both; } .cat-one-block { margin-right: 20px; display: inline-block; *display: inline; *zoom: 1; background-color: #CAE1FF; } .cat-longer { width: 28%; height: 100%; } .cat-shorter { width: 17%; height: 100%; } .cat-i-title { width: 100%; height: 40px; background-color: #DFDFDF; display: inline-block; } .vertically-index-line { width: 4px; height: 100%; display: inline-block; } .cat-i-title-name { width: 60%; display: inline-block; *display: inline; *zoom: 1; font-size: 20px; }

2 replies 2015-10-21 18:55:52 +08:00

IamJ

Oct 21, 2015 via iPhone

vertical-align

ceoimon

Oct 21, 2015

.vertically-index-line, .cat-i-title-name {
vertical-align: middle;
}

因为默认的 inline 元素按照 baseline 水平排列。