1

好的，一段时间以来我一直想在这里问另一个问题。我希望这很简单，而不是重复......

所以我有一个列表项列表，其中嵌套了一些锚标签......

<ul class="news">
<li><a href="#">This Link is Longer</a></li>
<li><a href="#">My Links</a></li>
</ul>

像那些。

如您所见，第一个锚标记的文本比下面的锚标记长，因为存在更多字符。

我的列表项上有一个背景颜色，但是我希望每个列表项的背景颜色/边界框仅与其中的锚标记一样宽，它是一个列表项...（忽略边距和填充)

我将无序列表区域设置为最大宽度为 40%，因为它是嵌套在父 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;
}

简而言之

背景框设置为最大锚标记的长度。在此示例中，我的链接“我的链接”周围有一个紫色框，与上面的链接“此链接更长”一样大或一样长。我很可能会踢自己，但是我将如何使用 CSS 设置我的 li 宽度（我假设宽度）相对于它的锚孩子的大小......“我的链接”应该有一个紫色框，只有“我的链接”扩展（当然，每边加上 7px 填充）。

谢谢你的hellppp

4

2 回答 2

1

使列表项也浮动

ul.news li {
    float: right;
}

示例小提琴

于 2013-07-31T21:59:57.010 回答
0

这是你想要的吗？

        ul.news {
            max-width: 40%;
            float: right;
        }

        ul.news li{
            text-align: right;
            margin: 0px 0px 10px 0px;
            padding: 7px 0px 7px 0px;
        }

        ul.news li a{
            padding: 7px;
            background-color: rgba(57,14,99,1.0);
        }
于 2013-07-31T22:07:56.987 回答