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

V2EX = way to explore

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

现在注册

已注册用户请登录

这是一个创建于 3314 天前的主题，其中的信息可能已经有所发展或是发生改变。

不管是 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>
        </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 条回复 • 2015-10-21 18:55:52 +08:00

IamJ

2015-10-21 18:45:22 +08:00 via iPhone

vertical-align

ceoimon

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

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

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