CSS-размер шрифта

0

У меня есть два элемента, которые довольно несвязаны: .menu и .content_selection_button. Единственное, что связывает их вместе, это то, что они находятся внутри <li> элементов в той же <ul>, кроме того, что они ничего не имеют. Тем не менее, по какой-то причине, когда я изменяю размер шрифта .content_selection_button это влияет на вертикальное размещение меню. У меня была аналогичная проблема здесь. Почему размер шрифта разрушает мое размещение и как его остановить?

JSFIDDLE

Размер шрифта 10

Изображение 174551

Размер шрифта 25

Изображение 174551

Меню CSS

.menu {
    display: inline-block;
    background-color:lightblue;
    margin: 1px;
    padding: 2px;
    box-sizing: border-box;
    border-radius:5px;
}

Кнопка выбора контента CSS

.content_selection_button{
    font-size: 10px;
    box-sizing: border-box;
    border-radius:5px;
}

HTML

<ul class="t_inject_container">
    <li class="t_inject_row">
        <ul class="menu">
            <li id="LI_4">
                <button class="add_button t_intect_button">
                    +
                </button>
            </li>
            <li>
                <button class="minimize_button t_intect_button">
                    m
                </button>
            </li>
        </ul>
    </li>
    <li>
        <ul class="content_selection_container">
            <li>
                <form name="search_form" class="search_form">
                    <input type="text" name="search_input" class="search_bar" />
                    <input type="submit" value="" class="search_button" name="search_button" />
                </form>
            </li>
            <li id="LI_14">
                <button class="content_selection_button">
                    My Timeline
                </button>
            </li>
            <li>
                <button class="content_selection_button">
                    relevent
                </button>
            </li>
            <li>
                <button class="content_selection_button">
                    mentions
                </button>
            </li>
        </ul>
    </li>
</ul>
  • 0
    Можете ли вы предоставить Js Fiddle больше стиля, это трудно отладить, как это? Также inline-block по умолчанию установлен в вертикальное выравнивание: середина
  • 0
    @JohanVandenRym Не верно, начальное значение vertical-align является baseline
Показать ещё 6 комментариев
Теги:
position
alignment
font-size

2 ответа

1
Лучший ответ

Я намекнул, что игра с нижним вертикальным выравниванием элементов встроенного блока может исправить проблемы выравнивания. Этого можно избежать, просто используя интерфейс пользователя, переработав надпись и CSS.

[ELEMENT] {
  vertical-align: text-bottom;
}
1

У вас есть основной родительский элемент с высотой 150 пикселей с LI внутри 25% высоты. так что получается около 37.5px. Высота не увеличится из-за увеличения размера шрифта, но это повлияет на вычисленную высоту линии, высота линии увеличится, нажав текст под центральной осью кнопки.

  • 0
    И это заставляет все остальное двигаться? Почему бы тексту просто не переместиться внутрь элемента и не оставить все остальное в покое?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню