在我解释之前......
这是 HTML 部分:
<div class="HeadingTabs">
<ul>
<li><a href="http://google.com" class="TabLink">Google</a></li>
</ul>
<div class="TitleTab">This is some very very long title. This is some very very long title. This is a very long title.</div>
</div>
这是 CSS 部分:
.HeadingTabs {
display: block;
padding: 8px 8px 8px 2px;
margin: 0;
border: 0;
background: transparent;
}
.HeadingTabs ul {
display: inline;
margin: 0 0 0 10px;
float: right;
position: absolute;
bottom: 0;
right: 8px;
}
.HeadingTabs li {
display: inline;
margin: 0;
}
.TitleTab {
margin: 0;
display: inline;
font-weight: bold;
text-decoration: none;
padding: 5px 10px;
line-height: 2.6;
white-space: nowrap;
/* I haven't included the styling info like
borders and background to avoid unnecessary
distractions in code. */
}
现在...如您所见,ul
元素向右浮动并且绝对定位到父 div 的右下角。这就是我所说的“绝对定位的 float 元素”的意思。
尽管给它留了边距,但我无法阻止标题(<div class="TitleTab">
元素)突出到其中。下图应该很清楚。
我错过了什么?
注意事项:
- 我无法修改 HTML。我唯一的选择是 CSS。
- 我希望标题环绕
ul
元素。所以,我不能使用宽度。 - 我正在使用
position: absolute;
因为我想要ul
元素保留在内容 div 正上方的 div 底部(在图像中被截断)。
PS:我对 CSS 不是很精通。
最佳答案
absolute:position
函数被设计成凸入。
你应该尝试在没有绝对位置的情况下 float 元素
.HeadingTabs ul {
margin:10px;
float: right;
}
.TitleTab {
float:left;
margin: 0;
font-weight: bold;
text-decoration: none;
padding: 5px 10px;
line-height: 2.6;
white-space: nowrap; // you need to remove no wrap, so it wraps instead of cuts off
}
关于html - 如何在绝对定位的 float 元素周围定义边距(CSS)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9687826/