Stretching tag to fill entire

by

The “a” tag is an inline level element. No inline level element may have its width set. Why? Because inline level elements are meant to represent flowing text which could in theory wrap from one line to the next. In those sorts of cases, it doesn’t make sense to supply the width of the element, because you don’t necessarily know if it’s going to wrap or not. In order to set its width, you must change its display property to block, or inline-block:

a.wide {
    display:block;
}

...

<ul id="menu">
  <li><a class="wide" href="https://stackoverflow.com/questions/3264370/javascript:;">Home</a></li>
  <li><a class="wide" href="https://stackoverflow.com/questions/3264370/javascript:;">Test</a></li>
</ul>

If memory serves, you can set the width on certain inline level elements in IE6, though. But that’s because IE6 implements CSS incorrectly and wants to confuse you.

More Related Contents:

  1. Setting the width of inline elements
  2. A Space between Inline-Block List Items [duplicate]
  3. Is it wrong to change a block element to inline with CSS if it contains another block element?
  4. Margin-Top push outer div down
  5. display: inline-block extra margin [duplicate]
  6. Problems with CSS sticky footer
  7. Add centered text to the middle of a horizontal rule [duplicate]
  8. White space at bottom of anchor tag
  9. 100% Min Height CSS layout
  10. Making the main scrollbar always visible
  11. Remove outline from select box in FF
  12. How to make div occupy remaining height?
  13. Change checkbox check image to custom image
  14. display:inline with margin, padding, width, height
  15. Specifying Tab-Width?
  16. How to use an tag inside a in the middle of a text? [duplicate]
  17. Padding the top and the bottom of inline element
  18. HTML list-style-type dash
  19. Table vertical header?
  20. What’s the point of valid CSS/HTML?
  21. Block Level Elements inside Inline elements [duplicate]
  22. Table with table-layout: fixed; and how to make one column wider
  23. vertical-align with Bootstrap 3
  24. Html/Css Triangle with pseudo elements
  25. Unskewing the ends of an assortment multiple skewed images
  26. Remove border from buttons
  27. Equivalent to float in Outlook
  28. How to change one element while hovering over another with CSS
  29. How to make CSS Grid items take up remaining space?
  30. How can I control the height of an Option element in Webkit?

Leave a Comment