CSS: кнопка "Получить" и выровненная

#html #css

Вопрос:

Я немного сбит с толку:

На картинке элемент с надписью «Навигация einblenden» есть span button , а элемент с надписью «Suche» — это а span a . Я стилизовал их точно так же:

часть css, dispOpts-это имя класса родительского диапазона. и все:ничего не предназначено для тестирования.

 .dispOpts {
    all:none;
}
.dispOpts button {
    all:none;
    background: var(--main-color);
    color: white;
    border: 1px solid white;
    padding: 0.4em;
    transition-duration: 0.5s;
    margin-left: 0.4em;
    margin-bottom:2em;
}
.dispOpts a {
    all:none;
    background: var(--main-color);
    color: white;
    border: 1px solid white;
    padding: 0.4em;
    transition-duration: 0.5s;
    margin-left: 0.4em;
}
.dispOpts::before,
.dispOpts::after {
    display: none;
}
.dispOpts a:hover,
.dispOpts button:hover{
    background: var(--accent-color);
    color: white;
}

Я вообще не могу найти никакой разницы…
Это наш верстак для рабочего проекта:
http://exist3.ulb.tu-darmstadt.de:8080/exist/apps/edoc/view.html?id=e000001_kuttenberger_religionsfrieden_einleitung

Ответ №1:

Как вы можете видеть в своем коде, вы не оформили их одинаково.

Кнопка .dispOpts a отсутствует margin-bottom:2em; , а также для работы так же , как кнопка вкл., вы должны добавить также display: inline-block вкл .dispOpts a ., а также быть одинаковыми, они должны иметь одинаковое line-height и font-size , поэтому результат будет таким:

 .dispOpts button {
    all:none;
    background: var(--main-color);
    color: white;
    border: 1px solid white;
    padding: 0.4em;
    transition-duration: 0.5s;
    margin-left: 0.4em;
    margin-bottom:2em;
    line-height: 1.4;
    font-size: 14px;
}
.dispOpts a {
    all:none;
    background: var(--main-color);
    color: white;
    border: 1px solid white;
    padding: 0.4em;
    transition-duration: 0.5s;
    margin-left: 0.4em;
    margin-bottom: 2em;
    display: inline-block;
    line-height: 1.4;
    font-size: 14px;
}

И все они были бы выровнены правильно с одинаковой высотой.

Также вы могли бы использовать его, all: initial; и конечный результат был бы:

 .dispOpts button {
    all:initial;
    background: var(--main-color);
    color: white;
    border: 1px solid white;
    padding: 0.4em;
    transition-duration: 0.5s;
    margin-left: 0.4em;
    margin-bottom:2em;
}
.dispOpts a {
    all:initial;
    background: var(--main-color);
    color: white;
    border: 1px solid white;
    padding: 0.4em;
    transition-duration: 0.5s;
    margin-left: 0.4em;
    margin-bottom: 2em;
    display: inline-block;
}

С таким способом вам понадобится только margin-bottom , и display на a элементе.

Ответ №2:

Обе ссылки не имели одинаковых стилей :