跨度的固定寬度？

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

來源

2017-06-21 user4893295

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

來源

2017-06-21 11:52:34

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

.mytext { 
    display:inline-block; 
}

來源

2017-06-21 12:06:48

試試這個

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

來源

2018-02-18 04:46:45

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

這不提供問題的答案。一旦你有足夠的[聲譽]（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-can- I-DO-代替）。 - [來自評論]（/ review/low-quality-posts/18855185） – AsifAli72090

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

跨度的固定寬度？

回答

相關問題