个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我有下面的演示代码:
<html>
<head>
<style type="text/css">
a{
display:block;
float:left;
}
#linkDiv{
border-style:solid;
}
</style>
</head>
<body>
<div id="linkDiv">
<a href="">test</a>
<a href="">test</a>
<a href="">test</a>
</div>
</body>
</html>
我希望我的链接是 block 状的，而且每个链接都彼此相邻。没有 float:left 这就是我得到的:
然而，当我使用 float:left 时，结果是这样的:
提前致谢
最佳答案
您需要在父元素上使用“clearfix”:
overflow: hidden;
或者
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
关于HTML/CSS : How can I float the 'a href' elements to the left without them leaving the div element that they are inside in?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13752679/
25
4
0
我是一名优秀的程序员,十分优秀！