Как определить маржу (CSS) вокруг абсолютно позиционированного, плавающего элемента? - PullRequest
Новая
       30

Как определить маржу (CSS) вокруг абсолютно позиционированного, плавающего элемента?

0 голосов
/ 13 марта 2012

Прежде чем я объясню ...

Это часть 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 Ответ

2 голосов
/ 13 марта 2012

Функция absolute:position предназначена для выдачи.

Вы должны вместо этого попробовать плавать элементы без абсолюта: 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
 }
...