Question

我有一个带有背景颜色的完整浏览器宽度列表（在悬停时会改变颜色）。但是，我希望li文本为text-align:left，最大宽度和左右边距相等 - 但背景颜色仍然是浏览器的完整宽度。我该怎么做？

我已经制作了一个JSfiddle here。

只要在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);}

Answer 1

你的CSS处于错误的级别：

在ul上定义背景颜色（可能宽度：100％;也没有测试）
定义边框和宽度：100％;在李
定义max-width :;在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是一个内联元素，不会自动占据整个宽度。使用display：block;在你的CSS中修复这个

Answer 2

将您的文本包装在<span class="myTexts">中并向其添加css属性：

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

完整的浏览器宽度列表，但文本具有最大宽度

2 个答案: