如何在絕對定位的浮動元素周圍定義邊距（CSS）？

Question

在我解釋之前......

這是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">元素） <div class="TitleTab">進入它。 下面的圖片應該清楚。

我錯過了什么？

注意事項：

• 我無法修改HTML。 我唯一的選擇是CSS。
• 我希望標題包含ul元素。 所以，我不能使用寬度。
• 我使用的position: absolute; 因為我希望ul元素保持在內容div正上方div的底部（只是在圖像中截止）。

PS：我對CSS不太熟練。

Answer 1

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
 }