0

Почему-то текст в теге толще остального, и я ума не приложу что на него влияет. Я пробовал font-style: normal и font-weight: normal, но ничего не помогает.

.detail-exercise-bottom-menu-container {
  display: flex;
  flex-direction: column;
}

.detail-exercise-bottom-menu-row1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 25px;
}

.detail-exercise-bottom-menu-row1-button {
  padding: 5px 15px 5px 15px;
  background-color: #363636;
  border-radius: 20px;
  color: #BDBDBD;
  font-size: 50px;
  text-decoration: none;
  text-align: center;
  width: 45%;
  font-weight: normal;
  cursor: pointer;
}

.detail-exercise-bottom-menu-row1-input {
  background: 0;
  border: 0;
  color: #BDBDBD;
  font-size: 50px;
  width: 95%;
  cursor: pointer;
  font-style: normal !important;
  font-weight: normal !important;
  text-align: center;
}
<div class="detail-exercise-bottom-menu-container">
  <div class="detail-exercise-bottom-menu-row1">
    <a class="detail-exercise-bottom-menu-row1-button" th:href="@{/exercises/{id}/edit(id=${exercise.getId()})}" th:text="Редактировать" />
    <form class="detail-exercise-bottom-menu-row1-button" th:method="DELETE" th:action="@{/exercises/{id}(id=${exercise.getId()})}">
      <input class="detail-exercise-bottom-menu-row1-input" type="submit" value="Редактировать" />
    </form>
  </div>
  <a class="detail-exercise-bottom-menu-row2-button" href="/exercises">Назад</a>
</div>

Результат

Результат запуска программы

1 ответ 1

1

добавьте для кнопки такой же шрифт, как и у инпута font-family: Arial

.detail-exercise-bottom-menu-container {
  display: flex;
  flex-direction: column;
}

.detail-exercise-bottom-menu-row1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 25px;
}

.detail-exercise-bottom-menu-row1-button {
  padding: 5px 15px 5px 15px;
  background-color: #363636;
  border-radius: 20px;
  color: #BDBDBD;
  font-size: 50px;
  text-decoration: none;
  text-align: center;
  width: 45%;
  font-weight: normal;
  font-family: Arial;  // изменение
  cursor: pointer;
}

.detail-exercise-bottom-menu-row1-input {
  background: 0;
  border: 0;
  color: #BDBDBD;
  font-size: 50px;
  width: 95%;
  cursor: pointer;
  font-style: normal !important;
  font-weight: normal !important;
  text-align: center;
}
<div class="detail-exercise-bottom-menu-container">
  <div class="detail-exercise-bottom-menu-row1">
    <a class="detail-exercise-bottom-menu-row1-button" th:href="@{/exercises/{id}/edit(id=${exercise.getId()})}" th:text="Редактировать" >Редактировать</a>
    <form class="detail-exercise-bottom-menu-row1-button" th:method="DELETE" th:action="@{/exercises/{id}(id=${exercise.getId()})}">
      <input class="detail-exercise-bottom-menu-row1-input" type="submit" value="Редактировать" />
    </form>
  </div>
  <a class="detail-exercise-bottom-menu-row2-button" href="/exercises">Назад</a>
</div>

2
  • Сработало! Спасибо. Но я не понимаю почему это так работает? Я забыл добавить в вопрос фрагмент body { font-family: "Nunito", sans-serif; } Я думал что это применит шрифт ко всему внутри body. 23 окт 2021 в 9:02
  • @Saluro.master, для некоторых элементов нужно ставить шрифт отдельно, не скажу, почему так сложилось, не узнавал. 23 окт 2021 в 16:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.