Question

这是我使用

的基本结构

<div class="choiceBox">
    <h2>Title</h2>

    <div class="column">
        <h3>Subtitle 1</h3>
        <input type="text">
        <select multiple size="10"></select>
    </div>

    <div class="column">
        <h3>Subtitle 2</h3>
        <input type="text">
        <select multiple size="10"></select>
    </div>
</div>

外部div是nowrap，一切（特别是标题）以继承为中心，内部div是内联块。 CSS的here的JSFiddle。

它只是一个奇怪的事情。最初（如上面的JSFiddle）我有输入并选择设置为100％宽度（通过边框），以便它们总是相同的宽度，即使其中一个加宽。这具有特殊的效果（至少在Firefox中），当窗口被调整为比外部div的宽度更窄时，h2在窗口而不是div中心。你可以通过缩小JSFiddle上的结果框来看到同样的事情。

通过在选择和输入上设置min-width而不是width来解决这个问题，所以我确实有一个解决方案。但我不知道为什么它会像这样开始。任何人都可以阐明这个谜团吗？

编辑：理想情况下，我不仅想知道为什么width: 100%会犯规，还要知道为什么min-width: 100%没有。

Answer 1

display: inline-block;上的white-space: nowrap;和.choiceBox以及width: 100%;的{{1}}的组合。

由于.column select, .column input display: inline-block;应该与其内容一样宽。但是使用.choiceBox，white-space: nowrap;不再足以扩展width: 100%;，并且会随着视口缩小。请参阅：http://jsfiddle.net/1rw6wqee/3/

如果我必须选择一个，我会说div是这里的坏人。

为什么HTML元素的居中会受到其侄子宽度的影响？

1 个答案: