Question

我正在尝试在名为“widget-3”的第三个li元素周围放置一个填充，但是它没有应用填充。任何人都可以帮我弄清楚为什么会这样吗？

CSS

 .footer-widgets {
    width: 93.75%;
    max-width: 1000px;
    margin: 0px auto;
}

.footer-widgets li { 
    width:24%; 
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    float: left;
    padding: 0px;
}

.footer-widgets li p{ 
    width:92%;
    font-size: 1em;
    line-height: 16px;  
}

.footer-widgets li a{ 
    color: #17c3f5;
    text-decoration:none;
}

.footer-widgets li:nth-child(3) { width: 48% }
.widget-3 {background-color: #4f4c4a; border: 1px solid #666462; padding: 10px;}

.widget-3 p { width: 100% }

HTML

<footer class="clearfix">
<ul class="footer-widgets">

<li class="widget-1">
<h4>About Us</h4>
<p>Once you are on the web, it is even more important to have a unique voice in this competitive cyber market. Additional to web design, I also offer affordable services in logo design, business cards and brochures. Please don't hesitate to contact me and I will be happy to give you a free custom quote within 24 hours. I also offer affordable services in logo design.</p>
<strong>Learn more</strong>
</li>

<li class="widget-2">
<h4>Twitter</h4>
<p><a href="#">@ambergoodwin</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate egestas volutpat. Morbi dignissim sapien sit amet ipsum vestibulum vel vehicula elit convallis. 15 hours ago</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 17 hours ago</p>
<p>Morbi dignissim sapien sit amet ipsum vestibulum vel vehicula elit convallis. 11 hours ago</p>
<strong>Follow us on Twitter</strong>
</li>

<li class="widget-3">
<h4>Services</h4>
<p>Once you are on the web, it is even more important to have a unique voice in this competitive cyber market. Additional to web design, I also offer affordable services in logo design, business cards and brochures. Please don't hesitate to contact me and I will be happy to give you a free custom quote within 24 hours. I also offer affordable services in logo design.</p>
<strong>Learn more</strong>
</li>
</ul>


</footer>

不确定填充不起作用我做错了什么？

此外，任何人都可以帮我看看为什么.widget-3 p {width：100％}不起作用？

非常感谢任何帮助。

Answer 1

您已声明上述相同规则，但具有不同的优先级。

请参阅CSS特异性规则：http://www.w3.org/TR/CSS2/cascade.html

此外，任何人都可以帮我看看为什么.widget-3 p {width：100％}不起作用？

您没有定义父容器宽度。您的浏览器会说“100％的内容？”请参阅.widget-3的规则。

Answer 2

填充由.footer-widgets li设置为0，其specificity比.widget-3更多。

.footer-widgets li p的宽度设置为92％，其特异性高于.widget-3 p。

只需在css末尾添加两个新声明：

li.widget-3 {padding: 10px;}
li.widget-3 p { width: 100% }

那应该解决它。

为什么我的填充不适用于我的<li> </li>

2 个答案: