Question

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

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

<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填充）。

感谢你的helllppp

Answer 1

使列表项也浮动

ul.news li {
    float: right;
}

<强> Example fiddle

Answer 2

这是你想要的吗？

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

父元素边界框相对于子元素

2 个答案: