Почему промежуток влияет на вертикальное расположение промежутка родного брата - PullRequest
Новая
       15

Почему промежуток влияет на вертикальное расположение промежутка родного брата

2 голосов
/ 02 апреля 2012

На следующей странице HTML у меня есть div, который содержит два диапазона (span1 и span2), второй из которых содержит подпанель, span2a.span1 содержит текст, как и span2a.При такой настройке вертикальное выравнивание текста отличается, и я не могу понять, почему.

Чтобы усложнить ситуацию, существуют атрибуты стиля в span2 и span2a.Я не контролирую их, поскольку они внедряются во время выполнения плагином цикла jQuery. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title> 
    <style type="text/css">
        body {margin: 0; padding: 0; font-family: arial; color: black;}
        .container { height: 30px; text-align: left; padding: 8px 15px 0 15px; background-color: #fee; border: 1px solid red;}
        .ticker { font-size: 12px; font-weight: bold; padding-top: 4px; float: left;}
        .ticker > span:first-child { background-color: #bfb; }
        .tickerscroll { display: inline-block; background-color: #bbf; }
    </style>
</head>
<body>
    <div class="container">
        <div class="ticker">
            <span class="span1">LABEL: </span>
            <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; overflow-x: hidden; overflow-y: hidden; ">
                <span class="span2a" style="position: absolute; top: 0px; opacity: 1; z-index: 3; left: 0px; ">The value (in a sub-span; note that Label is lower then this text)</span>
            </span>
        </div>
    </div>
    <div class="container">
        <div class="ticker">
            <span class="span1">LABEL: </span>
            <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; ">
                &nbsp;<span class="span2a" style="position: absolute; top: 0px; left: 0px; ">The value (this time, I've added a &amp;nbsp; outside this inner span)</span>
            </span>
        </div>
    </div>
    <div class="container">
        <div class="ticker">
            <span class="span1">LABEL: </span>
            <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; ">
                The value (this time, the inner span span2a is not present at all)
            </span>
        </div>
    </div>
</body>
</html>

Как вы можете видеть из моего кода, я добавил два варианта, которые "исправляют" проблему:

  1. Добавьте некоторый текст (любой текст, в моем случае я добавил неразрывный пробел) внутри span2 вне span2a.
  2. Удалите подпунктspan в целом, и иметь текст только внутри второго диапазона верхнего уровня.Тем не менее, это не вариант для меня, так как наличие span2a требуется, чтобы заставить jQuery работать на велосипеде.

Есть ли способ сделать два фрагмента текста выровненными одинаково, не имеяискусственно бросить в span2?Решение не может изменить атрибуты стиля любого из элементов span, но при необходимости может добавить классы CSS.

Ответы [ 3 ]

4 голосов
/ 02 апреля 2012

Вертикальное выравнивание отличается тем, что теги span являются естественными встроенными элементами, в вашем случае вы изменяете это поведение в своем классе span2, создавая элемент уровня блока со свойством overflow:hidden.Вы можете исправить это, определив класс span1 также как элемент уровня блока с помощью display:inline-block и просто выровняв его по верху с помощью свойства vertical-align:top или поместив его влево: 

.span1 {
    display: inline-block;
    *display:inline; /* ie 7 fix */
    vertical-align: top;
}

Или 

.span1 {
    float:left;
}
1 голос
/ 02 апреля 2012 
    .ticker span {vertical-align:top}

Чтобы ответить на ваш вопрос: промежуток 2 пуст, поэтому выравнивать нечему с промежутком 1. Участок 2 - это блок, содержащий абсолютно позиционированный промежуток 2а, и этот 2а начинается сверху: 0;left: 0 из span 2, таким образом, смещение.

второй случай: если span 2 не пустой, он будет выровнен по базовой линии с span 1, а ap span 2a выровнен, как и ожидалось.

вариант 3 такой же, как вариант 2.

0 голосов
/ 02 апреля 2012

Я бы попробовал это:

Все эти три пролета имеют одинаковую высоту строки и одинаковое вертикальное выравнивание

Пример: 

.span1, .span2, .span2a
{
    line-height: 20px;
    vertical-align: middle;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...