时间戳

首页 > 解决方案 > 如何将超链接（a）标签的宽度拉伸到全宽

html - 如何将超链接（a）标签的宽度拉伸到全宽

问题描述

我需要修复a标签的宽度。它应该与li标签对齐。如果li标签有 100% 的宽度，a标签应该跟在li100% 的宽度之后。

请看代码。

li{background:#ff0000; width:100%}
a{background:#ccc; width:100%}
<ul class="parent-sidebar-menu">
	<li class="page_item page-item-12 current_page_ancestor current_page_parent has_children">
		<a href="http://localhost/html5beta/html5/">HTML5</a>
		<ul class="child-sidebar-menu">
			<li class="page_item page-item-62 current_page_item">
				<a href="http://localhost/html5beta/html5/html5-tutorial/" aria-current="page">HTML5 Tutorial</a>
			</li>
			<li class="page_item page-item-64"><a href="http://localhost/html5beta/html5/html-tutorial/">HTML Tutorial</a></li>
			<li class="page_item page-item-66"><a href="http://localhost/html5beta/html5/html-forms/">HTML Forms</a></li>
			<li class="page_item page-item-68"><a href="http://localhost/html5beta/html5/html-graphics/">HTML Graphics</a></li>
			<li class="page_item page-item-70"><a href="http://localhost/html5beta/html5/html-apis/">HTML APIs</a></li>
			<li class="page_item page-item-72"><a href="http://localhost/html5beta/html5/html-example/">HTML Example</a></li>
			<li class="page_item page-item-74"><a href="http://localhost/html5beta/html5/html-references/">HTML References</a></li>
		</ul>
	</li>
</ul>

标签： htmlcss

解决方案

尝试添加display:block到您的li，a否则width: 100%对内联元素没有影响。 

li{background:#ff0000; width:100%; display: block}
a{background:#ccc; width:100%; display: block}
<ul class="parent-sidebar-menu">
	<li class="page_item page-item-12 current_page_ancestor current_page_parent has_children">
		<a href="http://localhost/html5beta/html5/">HTML5</a>
		<ul class="child-sidebar-menu">
			<li class="page_item page-item-62 current_page_item">
				<a href="http://localhost/html5beta/html5/html5-tutorial/" aria-current="page">HTML5 Tutorial</a>
			</li>
			<li class="page_item page-item-64"><a href="http://localhost/html5beta/html5/html-tutorial/">HTML Tutorial</a></li>
			<li class="page_item page-item-66"><a href="http://localhost/html5beta/html5/html-forms/">HTML Forms</a></li>
			<li class="page_item page-item-68"><a href="http://localhost/html5beta/html5/html-graphics/">HTML Graphics</a></li>
			<li class="page_item page-item-70"><a href="http://localhost/html5beta/html5/html-apis/">HTML APIs</a></li>
			<li class="page_item page-item-72"><a href="http://localhost/html5beta/html5/html-example/">HTML Example</a></li>
			<li class="page_item page-item-74"><a href="http://localhost/html5beta/html5/html-references/">HTML References</a></li>
		</ul>
	</li>
</ul>

推荐阅读