html - 如何将两个div并排对齐

Question

我想要两个相邻的 div。一个包含一个按钮，另一个包含一些文本。我想要带有 som 边距的按钮前的文本。但总是以错误的方式结束。 我的代码:

.helpButton {
        display: inline-block;  
        float: right;
    }

    .helpText {
        margin-right: 5em;
        float: right;
        display: inline-block;
    }

    .help-block {

        display: inline-block;  
        overflow: auto;
        float: right;
    }

<div class="help-block">
                <div class="helpText">@Resource.FooterHelp</div>
                <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">@Resource.FooterHelpLink</button>
            </div>

我知道这个论坛上也有类似的问题，但无法让主题为我工作

Thank you all for all your suggestions!

Answer 1

不要使用 float (正确的 float 会颠倒元素的顺序)。当您使用 display: inline-block 时，一个简单的 tex-align 就可以了

.help-block {

    display: inline-block;  
    text-align: right
}

.helpButton {
    display: inline-block;
}

.helpText {
    display: inline-block;
}

<div class="help-block">
  <div class="helpText">Some text</div>
  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button>
</div>