html - Parent Element Bounding Box Relative to Child Element -


ok i've been wanting ask question here time. hope simple enough , not repeat...

so have list item list anchor tags nested inside of them...

<ul class="news"> <li><a href="#">this link longer</a></li> <li><a href="#">my links</a></li> </ul> 

like those.

as can see first anchor tag's text longer anchor tag below, in there more characters present.

i have background-color on list items background-color/bounding box each list item wide anchor tag within it, being list item...(disregard margin , padding)

i have unordered list area set max-width of 40% piece of float nested inside of parent div...

ul.news {     max-width: 40%;     float: right; }  ul.news li {     text-align: right;     margin: 0px 0px 10px 0px;     background-color: rgba(57,14,99,1.0);     padding: 7px; } 

in short

the background box setting length of biggest anchor tag. in example, link "my links", has purple box around large or long link above it, "this link longer". kick myself, how i, using css, set li width (i'm assuming width) relative it's anchor child's size... "my links" should have purple box big "my links" extends (plus 7px padding on each side,of course).

thank helllppp

make list items float too

ul.news li {     float: right; } 

example fiddle


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

css - Firefox for ubuntu renders wrong colors -