Когда мой выбор ответа идет в две строки, я получаю много места между каждым предложением в моем теге кнопки. Я пытался установить

display:block;
float:left;

Который не работал. Я хочу, чтобы кнопка получала больше, чем одну строку, между предложениями оставалось меньше места. Вот мой код и мой фрагмент.

П.С. Я знаю, у меня много встроенных CSS. Это связано с тем, что я использую приложение под названием Ionic Creator, которое ставит им свои.

Фрагмент изображения

HTML

<div class="answer-div">
        <button style="font-weight:700;color:#32575E;font-size:28px;margin-left:15%;" id="a_one" value="" class="button button-royal button-large button-outline answer-choices"></button>
        <button style="font-weight:700;color:#32575E;font-size:28px;margin-left:4%;" id="a_two" value="" class="button button-royal button-large button-outline answer-choices"></button>
        <div class="spacer" style="width: 602.391px; height: 26px;"></div>
        <button style="font-weight:700;color:#32575E;font-size:28px;margin-left:15%;" id="a_three" value="" class="button button-royal button-large button-outline answer-choices"></button>
        <button style="font-weight:700;color:#32575E;font-size:28px;margin-left:4%;" id="a_four" value="" class="button button-royal button-large button-outline answer-choices"></button>
        <div class="spacer" style="width: 602.391px; height: 41px;"></div>
        <button style="font-weight:500;font-size:28px;" id="submit" value="" class="button button-royal button-large button-block submit">SUBMIT</button>
        <button style="font-weight:500;font-size:28px;" id="correct" class="button button-royal button-large button-block submit">CORRECT!</button>
        <button style="font-weight:500;font-size:28px;" id="submit-fake" class="button button-royal button-large button-block submit active"></button>
        <button style="font-weight:600;color:#FFFFFF;font-size:36px;" id="maggies_drawers" class="button button-assertive button-large button-block maggies_drawers">MAGGIE'S DRAWERS</button>
      </div>

CSS

.answer-choices {
    width: 35%;
    height:29%;
    border: solid 1.5pt #32575e;
    margin: 0;
    padding: 0;
}
0
anDee34 21 Авг 2018 в 00:58

3 ответа

Лучший ответ

Добавьте небольшой параметр line-height, например line-height: 1 или даже меньше (0,9 в моем примере фрагмента):

.answer-choices {
  border: solid 1.5pt #32575e;
  margin: 0;
  padding: 20px;
  line-height: 0.9;
  width: 240px;
}
<button style="font-weight:600;color:#333;font-size:36px;" class="answer-choices">MAGGIE'S DRAWERS</button>
0
Johannes 20 Авг 2018 в 22:08

Вверху моей головы звучит так, как будто вам нужно установить свойство line-height в CSS. https://www.w3schools.com/cssref/pr_dim_line-height.asp

Пример: line-height: 1.4;

0
Fishman 20 Авг 2018 в 22:05

Вы пытались установить свойство line-height рассматриваемого элемента на что-то меньшее?

0
peaceoutside 20 Авг 2018 в 22:04
51939013