Html 全浏览器宽度列表，但文本具有最大宽度

我有一个完整的浏览器宽度列表，背景颜色在悬停时会改变颜色。但是，我希望li文本是文本对齐：左，具有最大宽度，并且左右边距相等–但是背景颜色仍然是全浏览器宽度。我该怎么做

我做了一个小插曲

一旦我在li上设置了最大宽度，背景色就会明显缩小到最大宽度。有没有办法只针对列表中的文本

<div class="case_study_links">
    <ul>
        <li><a href="google.html">Abbey Meadow Flowers<br>Helping to grow a sustainable florists</a></li>
        <li><a href="google.html">Collins Environmental<br>Differentiating ecologists from competitors</a></li>
        <li><a href="google.html">University of Oxford<br>Branding for research project on young migrants</a></li>
        <li><a href="google.html">Small Woods<br>New brand brings credibility to organisation</a></li>
        <li><a href="google.html">Good Energy<br>Rebranding helps double customer numbers</a></li>
    </ul>
</div>

.case_study_links li {
     list-style: none;
     font-size:1.8rem;
     text-align:left;
     border-top:1px solid white;
}

.case_study_links a:link { color:white; display:block; padding:4.8rem 0; background-color:rgb(149,199,201);}
.case_study_links a:visited { color:white; display:block; padding:4.8rem 0; background-color:rgb(149,199,201);}
.case_study_links a:hover { color:white; display:block; padding:4.8rem 0; background-color:rgb(134,179,181);}
.case_study_links a:active { color:white; display:block; padding:4.8rem 0; background-color:rgb(134,179,181);}

---

您的CSS处于错误的级别：

定义ul上的背景色宽度：100%；我也没有测试 定义边界和宽度：100%；论李 定义最大宽度：；在a上，或a中的元素 正如建议的那样，可以将部分文本包装在span元素中。 我不想使用br，您可以这样做：

<li><a href="google.html"><p>Abbey Meadow Flowers</p><p>Helping to grow a sustainable florists</p></a></li>

将语义HTML的p元素相应地更改为H1、H2、H3、span、p等。 请注意，span是一个内联元素，不会自动占据整个宽度。使用显示：块；在CSS中修复此问题

请将文本包装在中并向其中添加CSS属性：

.myTexts
{
max-width:100px; // or anything you want
margin:auto
}

---

将文本包装成一个跨距，并在其中添加所需内容。