Выравнивание базовой линии кнопки YUI с базовой линией текста рядом с ним
Вы можете указать дочернему процессу печатать его переменные окружения (вызывая «env»), затем перебирать напечатанные переменные окружения в родительском процессе и вызывать «export» для этих переменных.
Следующий код основан на Захват вывода find. -print0 в массив bash
Если родительской оболочкой является bash, вы можете использовать
while IFS= read -r -d Если родительской оболочкой является дефис, то read не обеспечивает флаг -d и код усложняются
TMPDIR=$(mktemp -d)
mkfifo $TMPDIR/fifo
(bash -s << "EOF"
export VARNAME=something
while IFS= read -r -d \0' line; do
echo $(printf '%q' "$line")
done < <(env -0)
EOF
) > $TMPDIR/fifo &
while read -r line; do export "$(eval echo $line)"; done < $TMPDIR/fifo
rm -r $TMPDIR
echo $VARNAME
\0' line; do
export "$line"
done < <(bash -s <<< 'export VARNAME=something; env -0')
echo $VARNAME
Если родительской оболочкой является дефис, то read не обеспечивает флаг -d и код усложняются
TMPDIR=$(mktemp -d)
mkfifo $TMPDIR/fifo
(bash -s << "EOF"
export VARNAME=something
while IFS= read -r -d \0' line; do
echo $(printf '%q' "$line")
done < <(env -0)
EOF
) > $TMPDIR/fifo &
while read -r line; do export "$(eval echo $line)"; done < $TMPDIR/fifo
rm -r $TMPDIR
echo $VARNAME
6 ответов
. Заключите соседний текст в тег span с следующие стили:
<span style="vertical-align: middle; display: inline-block; margin-top: -1.1em;">
YUI Button:
</span>
Поскольку .yui-button имеет свойство display: inline-block , она будет вести себя как блок, но останется встроенной.
Будучи встроенным, блочная модель этого элемента будет прикреплена к строке, в то время как содержимое кнопки будет вести себя как блок. Таким образом, вам нужно будет выполнить какую-то вертикальную регулировку, как предложено Phase.
Поскольку кнопка имеет min-height: 2em , вам придется выполнить некоторую ручную настройку. Это:
.yui-skin-sam .yui-button {
margin-bottom: -0.5em; /* adjust for 2em min-height */
vertical-align: baseline; /* use consistent baseline */
}
дал мне хорошие результаты в IE7, FF3 и Chrome, но между ними все еще есть небольшое несоответствие. Возможно, вам нужно изучить, какие еще свойства применяются к первому диапазону, первому дочернему диапазону и кнопке, которые вызывают небольшие несоответствия. Конечно, вы также можете настроить селектор для применения только к одному экземпляру кнопки, а не ко всем кнопкам yui.
Вы также можете установить min-height для наследования, но тогда вы увидите, как другие свойства вступают в игру (например, первый дочерний элемент (промежуток в промежутке перед кнопкой) имеет макет блока).
В качестве альтернативы вы можете начать добавлять несколько оболочек вокруг остального текста, чтобы они вели себя так же, как кнопка, путем создания соответствующих промежутков в промежутках , но вы, кажется, хотите этого избежать. Если да, проверьте пару разных браузеров.
вы можете начать добавлять несколько оболочек вокруг остального текста, чтобы они вели себя так же, как кнопка, создавая соответствующие промежутки внутри промежутков, но вы, похоже, хотите этого избежать. Если да, проверьте пару разных браузеров. вы можете начать добавлять несколько оболочек вокруг остального текста, чтобы они вели себя так же, как кнопка, создавая соответствующие промежутки внутри промежутков, но вы, похоже, хотите этого избежать. Если да, проверьте пару разных браузеров.Я попробовал стилизовать кнопку с нуля. Я придумал следующий CSS. Его преимущество состоит в том, что текст, прилегающий к кнопке, не нужно заключать в какие-либо дополнительные элементы. Он отлично работает в последних версиях Internet Explorer, Firefox и Safari. Firefox 2 неправильно определяет высоту кнопки, а IE 6 и 7 разделяют ее по-своему.
.yui-button {
display: inline-block;
background: transparent url(http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/sprite.png) repeat-x scroll 0 0;
border-color: #808080;
border-style: solid;
border-width: 1px 0;
margin: auto 0.25em;
}
.yui-skin-sam .yui-button .first-child {
display: inline-block;
border-color: #808080;
border-style: solid;
border-width: 0 1px;
margin: 0 -1px;
}
.yui-skin-sam .yui-button button {
background-color: transparent;
border: medium none;
margin: 0;
min-height: 2em;
padding: 0 10px;
}
В строке 7 в button.css есть
.yui-button {
display:-moz-inline-box;
vertical-align:text-bottom;
}
. Если вы удалите оператор vertical-align, соседний текст выровняется с текстом кнопки.
Интересно. Из предоставленной вами ссылки, нумерация сверху вниз, a = выровнено, n = не выровнено, разные браузеры показывают:
ie6 1 n, 2 n, 3 n
ie7 1 a, 2 n, 3 n
ie8 1 a, 2 n, 3 a
ff2 1 a, 2 n, 3 a
ff3 1 a, 2 n, 3 n
saf 1 a, 2 a, 3 a
chr 1 a, 2 a, 3 a
Удаление вертикального выравнивания исправляет его в ff2, но не в ff3.
IE не поддерживает встроенный блок. Это может быть причиной некоторых различий в браузере.
Я не знаю, почему существует такая большая разница между safari / chrome, ff2 и ff3.
Чтобы кнопка была выровнена по тексту рядом с ней:
- Убедитесь, что кнопка (в данном случае
div) -inline-block. Это действительно сложная часть, поэтому я сделал небольшую запись о том, как заставить IE6 + и другие браузеры учитывать встроенный блок . - Добавьте
vertical-align: middleна кнопке и тексте.
Вы можете попробовать использовать отрицательное нижнее поле , чтобы опустить кнопку вертикально; если вы используете то же значение, что и отступ в тексте внутри кнопки или на самой кнопке, он может быть расположен правильно.
Я на работе и пишу это в IE6 (я знаю, я знаю. ..), поэтому я не могу смотреть слишком внимательно (не Firebug и т. д. - не ИТ-специалист), но если вы использовали vertical-align: baseline; или что-то подобное, он позиционирует элемент , а не текст внутри него, к базовой линии окружающего текста.
Вы также можете попробовать использовать line-height: $ height; где $ height равен вертикальной высоте кнопки ; что заставляет окружающий текст быть центрированным по вертикали в пределах этой высоты. Никаких гарантий, но это может / должно работать.