Making child element have same width and border as parent

Question

For example I have a "li" tag that inside it there is an "a" tag. I want the whole row to have a border-bottom: 1px solid #ccc;

<li class=sub"> <a href="3" class="active"> <span id="1">Text</span> </a> </li>

Currently I have

span { width: 90%; border-bottom: 1px solid #ccc; font-size:12px; } li { width: 100%; }

But it seems that only the Text will get underlined, i would want the whole "li" which takes like a whole row to be underlined. But not underlining the "li" but the "span" tag. So basically would want my "span" tag to be same width as parent "li" not sure what i am missing on my CSS.

Span is a inline element. If you want to set a width on the span, you can add display:inline-block for your span in your css. — service-paradis
– service-paradis, Commented Feb 17, 2014 at 23:02
a {display:block;border-bottom:1px solid #ccc;}, no span needed i guess :) — G-Cyrillus
– G-Cyrillus, Commented Feb 17, 2014 at 23:04

balexandre · Accepted Answer · 2014-02-17 23:03:36Z

you must understand that span is an inline element, and for such there is no such thing as width, to make the span inherit a width, you need to make sure that you set the display to a blockelement, in your case, try inline-block.

live example: http://jsbin.com/liwah/1/edit?html,css,output

good catch everyone! Its part of something larger but helps understand what I was doing wrong. thx

Collectives™ on Stack Overflow

Making child element have same width and border as parent

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related