Fixed width of span?

Question

I'm using Boostrap css to 'pull-right' some inline buttons in my list items. I want to fix the buttons there, so I am setting the width of the text-container to prevent it shunting the buttons. Only, it's not working.

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

Here's a fiddle which shows the buttons on the third row shunted down, despite me restricting the width of the text span before it:

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

Answer 1

Add display: inline-block to span to solve it:

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>

Answer 2

That's just because <span/> is an inline displayed element by default and the width rule is ignored by the browser. Add the rule below:

.mytext {
    display:inline-block;
}