如何在不指定宽度的情况下防止嵌套元素换行

Question

我无法在不指定宽度的情况下保持两个嵌套内联块对齐。我可以使用表格获得我想要的行为，但更愿意使用更简单的标记。这是基本标记：

<div class="error">
  <i></i>
  <div class="message">Ruh oh</div>
</div>

这是基本的css:

.error {
    border: 2px solid red;
    padding: 8px 10px;
}

i {
    display: inline-block;
    width: 45px;
    vertical-align: middle;
}

.message {
    display: inline-block;
    vertical-align: middle;
}

要求如下：

.error 可以是任意宽度（通常为 100%）
i 将固定宽度（通常为 45px）
.message 将填充父 .error
i 和 .message 都将在中间垂直对齐
.message 不能在 i
没有javascript

这里是一个 fiddle 显示好的行（短错误）、坏行（较长的错误消息在 i 下方换行）和一个带表格的工作示例（但我不想要表格）。请赐教！

http://jsfiddle.net/3m2db1hw/

Answer 1

您需要使用 display:table 到 parent Div 和 display:table-cell 到 children 即 <i> and <div>

.error {
    border: 2px solid red;
    padding: 8px 10px;
    display:table;
}

i {
    width: 45px;
    vertical-align: middle;
    display:table-cell !important;
}

.message {
    display: table-cell;
    vertical-align: middle;
}

这里是编辑过的jsfiddle http://jsfiddle.net/3m2db1hw/1/

如何在不指定宽度的情况下防止嵌套元素换行

How to prevent nested elements from wrapping without specifying widths

html

css

alignment

vertical-alignment