html - 直到关闭并再次打开 CSS 规则后，元素才会排列

Question

我有一个使用 CSS display:table(内联、行、单元格等)构建的布局。我正在使用 apache 对其进行本地开发，当我刷新页面时，两个 div 容器排列不正确。但是，如果我取消选中并重新选中 display:table-row，它们会自行更正，并且页面会正确显示。

http://jsfiddle.net/fNNKT/

您可以在上面的 jsFiddle 中看到 HTML 和 CSS。它实际上也在那里不起作用，所以也许我做错了什么，可以寻求帮助。

                <div class="cabinet-container">
                <div class="mode-bar">
                    <div class="mode-bar-left">
                        <div class="mode-bar-item">logo</div>
                        <div class="mode-bar-item active">Dispense</div>
                        <div class="mode-bar-item">Inventory</div>
                    </div>
                    <div class="mode-bar-right schedule">
                        <div class="mode-bar-item">Sign-Out</div>
                    </div>
                </div>
                    <div class="table"></div>
                    <div class="left-container"></div>
                    <div class="center-container">
                        <div class="search-container">
                            <div class="table-cell">
                                <div class="search-field"></div>
                            </div>
                        </div>
                        <div class="nav-button-center-container">
                            <div class="table-cell">
                            </div>
                        </div>
                        <div class="list">
                            <div class="table-cell">
                                <div class="list-item-center-container"></div>
                                <div class="list-item-center-container"></div>
                                <div class="list-item-center-container-partial"></div>
                            </div>
                        </div>
                        <div class="nav-button-center-container-down-active">
                            <div class="table-cell"></div>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="button-group table-border-5">
                            <div class="button-secondary">Dispense Non-Drug</div>
                            <div class="button-secondary">Sort By: Last Name</div>
                        </div>
                        <div class="button-group-right table-border-5">
                            <div class="button-primary">New Clinical Order</div>
                        </div>
                    </div>
            </div>​

Answer 1

您的问题是否与 .mode-bar-left 和 .mode-bar-right 换行有关？如果是这样，则问题与空格有关。想一想并排显示的两个图像。如果代码中标签之间有空格，浏览器中会显示空格。

解决方案 #1:
让你的逻辑在 DOM 中更上一层楼。将两个模式栏元素的 display 值更改为 table-cell(而不是当前的 inline-table)。然后将 .mode-bar-item 元素更改为 display: inline-block(而不是 table-cell)。

解决方案#2:
一种更快但不太优雅的解决方案是将 float: left 添加到 .mode-bar-left。

关于优雅的主题，我强烈建议您考虑一些比div 更具语义意义的标签。例如，.mode-bar-left 显然是一个列表(ul 也许？)而 .mode-bar-item 元素显然是列出元素 (li)。