Question

我希望彼此相邻的两个div。一个包含一个按钮另一些文本。我希望按钮之前的文字有som边距。但是最终的结果是错误的。我的代码：

＆＃13;

.helpButton {
        display: inline-block;  
        float: right;
    }

    .helpText {
        margin-right: 5em;
        float: right;
        display: inline-block;
    }

    .help-block {

        display: inline-block;  
        overflow: auto;
        float: right;
    }

＆＃13;

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

＆＃13;

我知道在这个论坛上有类似的问题，但不能让主题为我工作

感谢大家的所有建议！

Answer 1

试试这段代码。

逻辑上，您需要将button元素放在text元素之前，因为我们正在使用float:right。所以首先它将文本放在右边然后按钮。为了避免这个事情，我们只需要交换元素序列。无需对CSS进行任何更改。

.helpButton {
  float: right;
}

.helpText {
  margin-right: 10px;
  display: inline-block;
  float: right;
}


}
.help-block {
  display: inline-block;
  overflow: auto;
  float: right;
}

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

Answer 2

将容器元素的显示（在您的情况下为.help-block）从inline-block更改为flex即可。至少，如果这是你想要实现的目标吗？

.help-block {
  display: flex;
  overflow: auto;
  float: right;
}

.helpButton {
  float: right;
}

.helpText {
  margin-right: 10px;
  display: inline-block;
  float: right;
}

.help-block {
  display: flex;
  overflow: auto;
  float: right;
}

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

Answer 3

您可以使用inline-flex，

＆＃13;

.helpButton {
  float: right;
}

.helpText {
  margin-right: 10px;
  display: inline-flex;
  float: right;
}


.help-block {
  display: inline-flex;
  overflow: auto;
  float: right;
}

＆＃13;

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

＆＃13;

Answer 4

不要'使用浮动（右浮动反转元素的错误）。当您使用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>

Answer 5

我会使用flexbox并避免浮动。这样，所有元素都将遵循文档流程（并且您需要更少的CSS代码）。

.helpText {
  margin-right: 5em;
}

.help-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

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

Answer 6

将<div>更改为<span>，您将节省大量CSS：

.helpText {
  margin-right: 10px;
}

.help-block {
  overflow: auto;
  float: right;
}

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

Answer 7

＆＃13;

.helpButton {
  float: left;
}

.helpText {
  margin-right: 10px;
  display: inline-block;
 
}


}
.help-block {
  display: inline-block;
  overflow: auto;
  
}

＆＃13;

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

＆＃13;

如何将两个div对齐

7 个答案: