如何在绝对定位的浮动元素周围定义边距(CSS)?

时间:2012-03-13 16:14:43

标签: html css css-float css-position

在我解释之前...

这是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的右下角。这就是我的意思,当我说'一个绝对定位的浮动元素。'

尽管给予保证金,但我无法阻止标题(<div class="TitleTab">元素)突出。下面的图片应该清楚。

Imgur

我错过了什么?

注意事项:

  • 我无法修改HTML。我唯一的选择是CSS。
  • 我想让标题环绕ul元素。所以,我不能使用宽度。
  • 我正在使用position: absolute;,因为我希望ul元素保留在内容div正上方div的底部(图片中只是截止)。

PS:我对CSS不是很精通。

1 个答案:

答案 0 :(得分:2)

absolute:position功能旨在突出显示。

你应该尝试浮动元素而不使用absolute:position

.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
 }