如何对齐2 span左右不使用浮动

Question

我正在使用bootstrap并试图将一个按钮放在一个虚假的只读文本框中，这大致是我已经实现的。

这个div在一个有.table-responsive的表中，因此，如果我使用float，当btn非常宽时，它会溢出

我该怎么做考虑"测试"文本是可变长度，但我的按钮是固定的

<div class="my-container">
    <span>testing</span>
    <span class="btn btn-success pull-right">btn</span>
</div>

Answer 1

如果你的按钮宽度是固定的，那么你可以尝试这样做:

http://jsfiddle.net/1dm7c8jh/

html:

<div class="my-container">
    <span>testing</span>
    <span class="btn btn-success pull-right">btn</span>
</div>

css:

.my-container {
    background-color: #fffaae;
    padding: 10px;
    padding-right: 120px;
    position: relative;
    display: inline-block;
    margin: 10px;
}
.btn {
    background-color: #9AD2FF;
    position: absolute;
    padding: 5px;
    width: 100px;
    top: 5px;
    right: 5px;
    text-align: center;
    color: white;
    cursor: pointer;
}

Answer 2

你可以使用截断类从bootstrap，截断你的文本在两个跨度，或任何一个跨度。

在这里已经提到了，或者只是使用相同的CSS;

http://getbootstrap.com/css/less-mixins-truncating

    // Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}