2017-06-21 109 views
0

我正在使用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/

回答

3

添加display: inline-block跨越來解決它:

span { 
    display: inline-block; 
} 

小提琴:

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

0

這只是因爲<span/>是默認的行內顯示的元素和width規則是由瀏覽器忽略。下面添加規則:

.mytext { 
    display:inline-block; 
} 
0

試試這個

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

你能在關於加一點,以爲什麼這個代碼是一個更好的解決? – Daniel

+0

這不提供問題的答案。一旦你有足夠的[聲譽](https://stackoverflow.com/help/whats-reputation),你將可以[對任何帖子發表評論](https://stackoverflow.com/help/privileges/comment);相反,[提供不需要提問者澄清的答案](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-c​​an- I-DO-代替)。 - [來自評論](/ review/low-quality-posts/18855185) – AsifAli72090

+0

它不是一個更好的選擇,但是可以用填充調整跨度長度的替代選項 –