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>

这是一个小提琴，显示第三行的按钮被分流，尽管我限制了文本范围之前的宽度：

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

Answer 1

将display: inline-block添加到span以解决问题：

span {
  display: inline-block;
}

小提琴：

＆＃13;

#mybox {
  width: 400px;
}

.myli {
  background-color: yellow !important;
}

.mytext {
  width: 250px;
}
span {
  display: inline-block;
}

＆＃13;

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

＆＃13;

Answer 2

这只是因为默认情况下<span/>是内联显示的元素，浏览器会忽略width规则。添加以下规则：

.mytext {
    display:inline-block;
}

Answer 3

试试这个

<span class="input-group-addon" style="padding-left:6%; padding-right:6%; #background-color:red; width:150px; overflow: auto;">

固定的跨度宽度？

3 个答案: