How to Make Anchor Tags Span the Full Width of List Items?

Full-Width Anchor Tags in List Items

Introduction

When designing navigation menus, it's common to want the anchor tags () to stretch across the entire width of the list items (

). However, setting the width attribute on tags typically has no effect.

Solution

To achieve this stretching effect, we must change the display property of the anchor tag. Inline elements like cannot have their width set. Instead, we need to convert them to block or inline-block elements:

<code class="css">a.wide {
    display: block;
}</code>

Usage

Once the CSS rule is defined, add the "wide" class to the anchor tags within the

elements:

<code class="html"><ul id="menu">
  <li><a class="wide" href="javascript:;">Home</a></li>
  <li><a class="wide" href="javascript:;">Test</a></li>
</ul></code>

Notes

• In Internet Explorer 6, it may be possible to set the width of inline elements, but this is due to incorrect CSS implementation.

The above is the detailed content of How to Make Anchor Tags Span the Full Width of List Items?. For more information, please follow other related articles on the PHP Chinese website!