Question

我有一个无序列表作为菜单。所有项目都有背景色。我想要的是项目的宽度不填充列表的宽度，并且项目（包括背景颜色）与列表中的右侧对齐。我希望你能理解并得到答案。

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>

和CSS：

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

Answer 1

根据您的要求，您必须将文本包装在<span>内。这是一个有效的Demo。

这是HTML代码。

<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;}

Answer 2

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

如果我理解你的要求，这对你有用。有时我会为背景设置不同的颜色，以便能够清楚地看到正在发生的事情。

大小背景列表项目取决于项目大小

2 个答案: