Feste Breite der Spannweite?

Question

Ich benutze Boostrap css, um einige Inlineknöpfe in meinen Listenelementen zu 'ziehen'. Ich möchte die Tasten dort fixieren, also stelle ich die Breite des Textcontainers so ein, dass er die Tasten nicht verschiebt. Nur, es funktioniert nicht.

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

Hier ist eine Geige, die die Tasten auf der dritten Reihe zeigt abgeschoben nach unten, obwohl ich die Breite des Textbereiches, bevor sie zu beschränken:

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

Answer 1

hinzufügen display: inline-block überspannen, um es zu lösen:

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

Das ist nur, weil <span/> ein Inline angezeigte Element ist standardmäßig und die width Regel wird vom Browser ignoriert. Fügen Sie die folgende Regel:

.mytext { 
    display:inline-block; 
} 

Answer 3

versuchen diese

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