父级 div 跟随子级的高度 - 对于没有浮动的子级

发布于 2024-10-19 04:10:27 字数 801 浏览 0 评论 0原文

我能找到的解决问题的唯一答案是明确的浮动 - 但我没有。所以希望你能提供另一个答案:-)

这是我的代码，我试图使按钮的父 div 遵循填充完成的扩展。

<div class="button">
    <a href="#">add</a>
</div>

和 css

.button {
    background-color: #ccc; }
.button a {
background-color: #96BD1E;
color: black;
font-size: large;
padding: 6px 12px;
width: 120px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-opera-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
height: 59px;
margin: 10px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
    clear: both;
}

这是一个使用 http://jsfiddle.net/zNLVZ/1/

原文

The only answer I can find to my problem is clear the float - but I have non. So hope you can help with another answer :-)

Here is my code, and I am trying to make the parent div of a button follow the expansion done by the padding.

<div class="button">
    <a href="#">add</a>
</div>

And css

.button {
    background-color: #ccc; }
.button a {
background-color: #96BD1E;
color: black;
font-size: large;
padding: 6px 12px;
width: 120px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-opera-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
height: 59px;
margin: 10px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
    clear: both;
}

And here is an example of it to play with http://jsfiddle.net/zNLVZ/1/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

噩梦成真你也成魔 2024-10-26 04:10:27

将你的 css 更改为：

.button {
background-color: #ccc; 
}
.button a {
display:inline-block;
background-color: #96BD1E;
color: black;
font-size: large;
padding: 6px 12px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-opera-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
margin: 10px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
    clear: both;
}

Change your css to this:

.button {
background-color: #ccc; 
}
.button a {
display:inline-block;
background-color: #96BD1E;
color: black;
font-size: large;
padding: 6px 12px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-opera-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
margin: 10px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
    clear: both;
}

回复收藏 0 原文

~没有更多了~