css 前端求解， display: inline-block 左右两个元素不对齐

V2EX = way to explore

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

现在注册

已注册用户请登录

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

在线demo>>>
http://jsfiddle.net/mDdKr/399/

Inline

前端

CSS

17 条回复 • 2016-12-28 09:00:37 +08:00

rayps

2015 年 3 月 10 日

.list-details .block-now, .list-details .block-next{
/* display: inline-table; */
float: left;
}

gangsta

2015 年 3 月 10 日

第二个加float: left;

NemoAlex

2015 年 3 月 10 日

.list-details .block-now, .list-details .block-next {
}

NemoAlex

2015 年 3 月 10 日

Sorry, 不小心提交了
.list-details .block-now, .list-details .block-next {
vertical-align: top;
}

wwwap

2015 年 3 月 10 日

@mixin inline-block-fix($element) {
font-size: 0;
> #{$element} {
display: inline-block;
vertical-align: top;
}
}

franciscowxp

2015 年 3 月 10 日

.list-details .block-now, .list-details .block-next {
vertical-align:middle;//add
}

romoo

2015 年 3 月 10 日

设置 vertical-align

icanfork

2015 年 3 月 10 日

设置 vertical-align ，就是设置表格的对齐方式

那么多人回复了，哈哈

loveuqian

2015 年 3 月 10 日

搭车求解为什么加了float left就对齐了

breeswish

2015 年 3 月 10 日

@loveuqian float:left 会导致其按照浮动布局来布局（display 不再 inline），和 inline-block 已经没有关系了
写加 float:left 是相同结果的另一种途径，却不是楼主途径的正确修正

loveuqian

2015 年 3 月 10 日

@breeswish 没看懂，感谢回答，新手学css的基础的几个难点估计就在float，position，display，

b821025551b

2015 年 3 月 10 日

@loveuqian 反正float属性很恶心就是了，能不用，就不用。

loveuqian

2015 年 3 月 10 日

@b821025551b 能不用就不用的话问一下最基本的两列布局的话，难道要用position嘛？

sunhk25

2015 年 3 月 11 日

解决》》http://jsfiddle.net/mDdKr/404/
/* float: left; */ /* 仅加这个也OK */
/* vertical-align: top; */ /* 仅加这个也OK */
vertical-align:middle; /* 仅加这个也OK，这个我最喜欢 */
@rayps
@gangsta
@NemoAlex
@wwwap
@franciscowxp
@romoo
@belin520
@loveuqian
@breeswish
@b821025551b
谢谢各位

juicy

2015 年 3 月 11 日

本来table布局中有些东西就非常不直觉化，一般能避免用table就不用table，楼主都用div了竟然还把它们硬生生地套用成table。。。用display:inline-block应该既能实现楼主的期望，同时由不会引入楼主遇到的问题。

另外，我研究了一下规范，找到为什么会出现demo中的奇怪现象的原因了。

详见博文 http://melon.github.io/blog/2015/03/11/a-quirk-table-case/

sunhk25

2015 年 3 月 12 日

@juicy
看了博文，又学习知识了。
我最开始用的是inline-block ，但用inline-table还是比较上手。
table会自动填满，居中容易，元素左右自动调节。

tolerious

2016 年 12 月 28 日

@wwwap 正解。