Question

当我的答案选择为两行时，我的按钮标签中的每个句子之间都有很大的空间。我尝试设置

display:block;
float:left;

这不起作用。我想发生的是，当按钮超过一行时，句子之间的空间减少了。这是我的代码和代码段。

P.S我知道我有很多内联CSS。这是由于我正在使用的应用程序称为Ionic Creator，该应用程序将它们放置了。

Image snippet

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;
}

Answer 1

您是否尝试过将相关元素的line-height属性设置为较小的值？

Answer 2

添加小的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>

Answer 3

听起来很像您需要在CSS中设置line-height属性。 https://www.w3schools.com/cssref/pr_dim_line-height.asp

例如：line-height：1.4;

删除按钮标记中文本行之间的空间

3 个答案: