[英]css display: inline-block issue
i was trying to work on html,css and i got a problem. 我试图在html,css上工作,但遇到了问题。 i am using display: inline-block so that my list items cover all the width of the header.
我正在使用display:inline-block,以便我的列表项覆盖标题的所有宽度。 but instead of covering whole width it just floats to the left.
但是它并没有覆盖整个宽度,而是向左浮动。 here is a demo of html/css on jsfiddle, http://jsfiddle.net/oso6x7cd/
这是jsfiddle上的html / css演示, http://jsfiddle.net/oso6x7cd/
html 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>
thanks 谢谢
In fact inline-block is working fine. 实际上,内联块工作正常。 That's the normal behavior for inline-block.
这是内联块的正常行为。
Setting an element to display:inline-block;
设置要
display:inline-block;
的元素display:inline-block;
does not make it fill it's container's width. 不能使其填充容器的宽度。
Setting display:table; width:100%;
设置
display:table; width:100%;
display:table; width:100%;
to the ul
element and display:table-cell;
到
ul
元素并display:table-cell;
to the li
elements seems to do the trick and is relatively simple. li
元素似乎可以解决问题,并且相对简单。
Updated fiddle: http://jsfiddle.net/oso6x7cd/1/ 更新的小提琴: http : //jsfiddle.net/oso6x7cd/1/
See an updated fiddle with a minimal working example along with media queries to change the padding of the menuitems as the browser window gets smaller: 查看更新的小提琴,其中包含一个最小的工作示例以及媒体查询,以随着浏览器窗口变小来更改菜单项的填充:
http://jsfiddle.net/oso6x7cd/2/ http://jsfiddle.net/oso6x7cd/2/
Another update to make the nav-bar narrower according to the screen size: http://jsfiddle.net/oso6x7cd/3/ 根据屏幕大小使导航栏变窄的另一个更新: http : //jsfiddle.net/oso6x7cd/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.