Question

我正在尝试使用html，css，我遇到了问题。我正在使用display：inline-block，以便我的列表项覆盖标题的所有宽度。但是它不是覆盖整个宽度而是漂浮在左边。这是jsfiddle的html / css演示， http://jsfiddle.net/oso6x7cd/

HTML

<nav id="globalheader" class="globalheader gh-selected-tab-iphone" role="navigation" aria-label="Global Navigation" data-hires="false" data-analytics-region="global nav" lang="en-US">
            <div id="gh-content" class="gh-content">
                <div class="gh-nav">
                    <div class="gh-nav-view">
                        <ul class="gh-nav-list">
                            <li class="gh-tab gh-tab-apple"><a class="gh-tab-link" href="/"><span class="gh-tab-inner"><span class="gh-text-replace">Apple</span></span></a></li>
                            <li class="gh-tab gh-tab-store"><a class="gh-tab-link" href="http://store.apple.com/us"><span class="gh-tab-inner"><span class="gh-text-replace">Store</span></span></a></li>
                            <li class="gh-tab gh-tab-mac"><a class="gh-tab-link" href="/mac/"><span class="gh-tab-inner"><span class="gh-text-replace">Mac</span></span></a></li>
                            <li class="gh-tab gh-tab-iphone"><a class="gh-tab-link" href="/iphone/"><span class="gh-tab-inner"><span class="gh-text-replace">iPhone</span></span></a></li>
                            <li class="gh-tab gh-tab-watch"><a class="gh-tab-link" href="/watch/"><span class="gh-tab-inner"><span class="gh-text-replace">Watch</span></span></a></li>
                            <li class="gh-tab gh-tab-ipad"><a class="gh-tab-link" href="/ipad/"><span class="gh-tab-inner"><span class="gh-text-replace">iPad</span></span></a></li>
                            <li class="gh-tab gh-tab-ipod"><a class="gh-tab-link" href="/ipod/"><span class="gh-tab-inner"><span class="gh-text-replace">iPod</span></span></a></li>
                            <li class="gh-tab gh-tab-itunes"><a class="gh-tab-link" href="/itunes/"><span class="gh-tab-inner"><span class="gh-text-replace">iTunes</span></span></a></li>
                            <li class="gh-tab gh-tab-support"><a class="gh-tab-link" href="/support/"><span class="gh-tab-inner"><span class="gh-text-replace">Support</span></span></a></li>

                        </ul>
                    </div>
                </div><!--/gh-nav-->
            </div>
        </nav>

感谢

Answer 1

事实上，内联块工作正常。这是inline-block的正常行为。

Answer 2

将元素设置为display:inline-block;并不会使其填充容器的宽度。

将display:table; width:100%;设置为ul元素，将display:table-cell;设置为li元素似乎可以解决问题并且相对简单。

更新小提琴： http://jsfiddle.net/oso6x7cd/1/

在浏览器窗口变小时，查看最新的小提示，其中包含最小的工作示例以及媒体查询以更改菜单项的填充：

http://jsfiddle.net/oso6x7cd/2/

根据屏幕尺寸使导航栏变窄的另一个更新：http://jsfiddle.net/oso6x7cd/3/

css显示：内联块问题

2 个答案: