我正在尝试处理 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>
谢谢
最佳答案
将元素设置为 display:inline-block;
不会使其填充容器的宽度。
设置显示:表格; width:100%;
到 ul
元素和 display:table-cell;
到 li
元素似乎可以解决问题并且相对简单。
更新的 fiddle : http://jsfiddle.net/oso6x7cd/1/
请参阅更新的 fiddle ,其中包含一个最小的工作示例以及媒体查询,以在浏览器窗口变小时更改菜单项的填充:
http://jsfiddle.net/oso6x7cd/2/
根据屏幕尺寸使导航栏变窄的另一个更新:http://jsfiddle.net/oso6x7cd/3/
关于html - CSS 显示 : inline-block issue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28014521/