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

V2EX = way to explore

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

现在注册

已注册用户请登录

V2EX 提问指南

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

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

Inline

前端

CSS

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

rayps

2015-03-10 17:20:04 +08:00

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

gangsta

2015-03-10 17:24:32 +08:00

第二个加float: left;

NemoAlex

2015-03-10 17:25:15 +08:00

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

NemoAlex

2015-03-10 17:25:53 +08:00

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

wwwap

2015-03-10 17:25:56 +08:00

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

franciscowxp

2015-03-10 17:26:41 +08:00

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

romoo

2015-03-10 17:27:47 +08:00

设置 vertical-align

belin520

2015-03-10 17:32:27 +08:00

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

那么多人回复了，哈哈

loveuqian

2015-03-10 18:06:17 +08:00

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

breeswish

2015-03-10 18:32:01 +08:00

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

loveuqian

2015-03-10 18:35:22 +08:00

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

b821025551b

2015-03-10 18:59:08 +08:00

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

loveuqian

2015-03-10 21:19:13 +08:00

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

sunhk25

2015-03-11 09:05:59 +08:00

解决》》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-03-11 17:43:52 +08:00

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

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

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

sunhk25

2015-03-12 09:05:35 +08:00

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

tolerious

2016-12-28 09:00:37 +08:00

@wwwap 正解。