css - 跨度固定宽度？

Question

我正在使用 Boostrap CSS 来“向右拉”列表项中的一些内联按钮。我想在那里修复按钮，所以我设置了文本容器的宽度以防止它分流按钮。只是，它不起作用。

#mybox {
  width: 400px;
}

.myli {
  background-color: yellow;
}

.mytext {
  width: 250px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="mybox">


  <ol>
    <li class="myli list-group-item clear-fix"><span class="mytext">Some text</span><span class="pull-right"><button>
    Button
    </button></span></li>
    <li class="myli list-group-item clear-fix"><span class="mytext">Some text</span><span class="pull-right"><button>
    Button
    </button></span></li>
    <li class="myli list-group-item clear-fix"><span class="mytext">Some very long text which interferes with the button on the following row oiwiowh wdoihsoih osdih ohsdih soidhoishisdhoidh soidh odih</span><span class="pull-right"><button>
    Button
    </button></span></li>
    <li class="myli list-group-item clear-fix"><span class="mytext">Some text</span><span class="pull-right"><button>
    Button
    </button></span></li>
  </ol>

这是一个显示第三行按钮被分流的 fiddle ，尽管我限制了它前面的文本跨度的宽度:

https://jsfiddle.net/3q7ha8fo/1/

Answer 1

在span中添加display: inline-block即可解决:

span {
  display: inline-block;
}

fiddle :

#mybox {
  width: 400px;
}

.myli {
  background-color: yellow !important;
}

.mytext {
  width: 250px;
}
span {
  display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="mybox">


<ol>
<li class="myli list-group-item clear-fix"><span class="mytext">Some text</span><span class="pull-right"><button>
Button
</button></span></li>
<li class="myli list-group-item clear-fix"><span class="mytext">Some text</span><span class="pull-right"><button>
Button
</button></span></li>
<li class="myli list-group-item clear-fix"><span class="mytext">Some very long text which interferes with the button on the following row oiwiowh wdoihsoih osdih ohsdih soidhoishisdhoidh soidh odih</span><span class="pull-right"><button>
Button
</button></span></li>
<li class="myli list-group-item clear-fix"><span class="mytext">Some text</span><span class="pull-right"><button>
Button
</button></span></li>
</ol>

</div>