Как да дефинираме маржа (CSS) около абсолютно позициониран, плаващ елемент? - html, css, css-float, css-позиция

Преди да обясня ...

Това е частта 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"> елемент) от изпъкнали в него. Изображението по-долу трябва да го изясни.

Какво ми липсва?

Забележки:

• Не мога да променям HTML. Моят единствен ход е CSS.
• Искам заглавието да приключи ul елемент. Така че, не мога да използвам ширина.
• Използвам position: absolute; защото искам ul елемент, за да остане на дъното на div точно над съдържанието div (просто прекъсване в изображението).

PS: Не съм много опитен с CSS.

Отговори:

Най- 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
}