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

【问题标题】：How to prevent nested elements from wrapping without specifying widths如何防止嵌套元素在不指定宽度的情况下换行
【发布时间】：2015-07-10 01:12:52
【问题描述】：

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

<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

这是一个小提琴，显示了一条好线（短错误），一条坏线（较长的错误消息在 i 下方包裹）和一个带有表格的工作示例（但我不想要表格）。请赐教！

http://jsfiddle.net/3m2db1hw/

【问题讨论】：

标签： html css alignment vertical-alignment

【解决方案1】：

您需要将display:table 用于父级Div 和display:table-cell 用于子级，即<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/

【讨论】：