Size background list item dependent of item size

Question

I have a unordered list as a menu. All items have a background-color. What I want is that the width of the item does not fill the width of the list, and that the item (including the background-color) is aligned to the right in the list. I hope you understand and might have an answer.

HTML:

<ul class="menu">
<li><a class="menuitem">First</a></li>
<li><a class="menuitem">Secondwithlongertext</a></li>
<li><a class="menuitem">Thirdbitshorter</a></li>
</ul>

And CSS:

ul li a.menuitem{ 
background-color:#000;
color:#fff;
}

Just apply the background-color to the `A` elements instead of the `LI`, and use `text-align:right` on the `LI` or `UL` to have the links align to the right of the list … surprised you have to even ask for something as basic as this. — CBroe, Mar 15 '14 at 18:22
@CBroe Sorry for asking a question that might be basic to you. I couldn't figure it out. — B_s, Mar 15 '14 at 18:26

score 1 · Accepted Answer · answered Mar 15 '14 at 18:03

1

As per you requirement you have to wrap the text inside the <span>. Here is a working Demo.

Here is the HTML code.

<ul class="menu">
  <li><a class="menuitem"><span>First</span></a></li>
<li><a class="menuitem"><span>Second Item with long  text can come here</span></a></li>
<li><a class="menuitem"><span>Thirdbitshorter</span></a></li>
</ul>

ul { 
    background-color:gold;
    color:#fff;
}
ul li{
    background: #990000;
}
ul li a {
    text-align: right;
}
ul li span{ background:black;}

answered Mar 15 '14 at 18:03

Kheema Pandey

9,977
4
25
26

The `SPAN` elements are nonsense, you can give the background color to the `A` instead. And to have those align to the right, the text-align has to set on the `LI` or `UL` of course – aligning text within an element that is only as wide as the text demands is nonsense. – CBroe Mar 15 '14 at 18:24

score 0 · Answer 2 · answered Mar 15 '14 at 17:45

0

ul { 
    background-color:#000;
    color:#fff;
    width: 100%;
}
ul li{
    background: #990000;
    width: 50%;
}
ul li a {
    text-align: right;
}

This should work for you if I understand what you're asking. Sometimes I make the backgrounds different colors just to clearly be able to see what is going on.

answered Mar 15 '14 at 17:45

tywalker

78
6

Actually, I'm trying to make the li width depend on the content. So a long text should have a wider background than a short text. Ideas? – B_s Mar 15 '14 at 17:57
It will automatically adjust... Divs, links, and paragraphs aren't a predetermined width. – tywalker Mar 15 '14 at 19:25

Size background list item dependent of item size

2 Answers2