Question

我需要固定a标签的宽度。它应该与li标签对齐。如果li标签的宽度为100％，a标签的宽度应为li，宽度为100％。

请查看代码。

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>

Answer 1

尝试将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>

Answer 2

为此CSS display:block添加a tag

li{background:#ff0000; width:100%}
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>

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

2 个答案: