Question

我正在使用内联块DIV列表：

<div class="row" style="border:1px solid;width:40%;overflow:hidden">
  <div style="display:inline-block">A</div>
  <div style="display:inline-block">B</div>
  <div style="display:inline-block">C</div>
  <div style="display:inline-block">D</div>
  <div style="display:inline-block">E</div>
  <div style="display:inline-block">F</div>
</div>

请参阅jsfiddle demo

当我调整浏览器大小时，列表在字母之间保持相同的空格，但是当我将其调整为太小时，字母开始换行。

如何强制nowrap在列表中
如何均匀地分散字母以获取父宽度的完整范围？

Answer 1

使用display:table-cell，它不会换行。
给他们所有人width约15％，

Working Fiddle

Answer 2

1）在父容器上设置一个高度（隐藏溢出） - 这样 - 视觉上 - 字母不会换行。

2）使用text-align:justify和伪元素来对齐字母。

<强> FIDDLE

.row
{
    border:1px solid;
    width:40%;
    height: 18px;
    overflow:hidden;
    text-align:justify;
}
.row:after
{
    content:'';
    display:inline-block;
    width: 100%;
}
.row div
{
    display:inline-block;
}

如何在DIV的垂直列表上执行“nowrap”

2 个答案: