Html 如何在绝对定位的浮动元素周围定义边距（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>

.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的右下角。这就是我所说的“绝对定位的浮动元素”的意思

尽管给它留了一个空白，但我无法阻止标题（

元素）伸入其中。下面的图片应该清楚地显示出来

我错过了什么

注意事项：

• 我不能修改HTML。我唯一的选择是CSS
• 我希望标题环绕

  ul

  元素。所以，我不能使用宽度
• 我使用的是

  位置：绝对

  因为我希望

  ul

  元素保持在div的底部，就在content div的正上方（仅在图像中截断）

---

PS：我对CSS不是很精通。

绝对：位置功能设计为突出到

您应该尝试在没有绝对：位置的情况下浮动元素

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

---

使用

position:absolute

后，元素将从文档流中删除。放弃绝对定位，只使用浮点数。@DavidKolar：请看我的编辑。无法更改HTML使这变得很困难。如果您知道定位元素将包含多少个字符，您可以在标题后面添加不间断的空格：

.TitleTab:after{content:“\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0”；}

（在IE7中不起作用）。您还需要删除

空白：nowrap，正如约翰尼·克雷格所说。@DavidKolar-Hmm。。。更改HTML似乎是我唯一的选择。感谢您的参与。如果您对所需宽度有任何了解和想法，那么
.TitleTab:after
伪类应该可以与现有HTML一起使用。请参阅我的编辑。我已经添加了一些要点，这些要点应该更清楚。如果
.HeadingTab
与
ul
的高度相同，它应该像您所希望的那样位于底部。不幸的是css没有一个
float:bottomright。。如果标题和列表不能具有相同的高度，因为它会根据文本的长度而改变高度，那么我想不出一种方法可以在不修改html和使用表格的情况下将列表保持在底部。。如果它们可以是相同的高度，只需在css
height:40px中设置高度
您还可以使用javascript（如果可能的话）设置
.TitleTab
中的最大字符数，这样看起来：
这是一个很长的标题，这是一个…。
我将尝试找到一种方法。如果我不能，我会在JS或HTML表之间做出选择，就像你建议的那样。谢谢你的建议。