< Div>跳到新行

當文本變得有點長時，我的黃色格跳下來。 See imagesofproblem。< Div>跳到新行

<html> 
    <div style="background-color:#00ff00; width:200px;"> 
    <ul style="list-style:none;"> 
     <li><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow;">Hit me! Hit me! -Hit me! -</div> </li> 
    </ul> 
    </div> 
</html>

我怎樣才能確保黃色div不會跳下來，當文字變長。日誌文本應該會自動變成新行。

（是否有可能不把「寬度」黃色DIV解決這個問題）

來源

2017-01-16 user1032019

你可以設置你的寬度爲'auto'或者只是刪除它，你不想那樣？ – Roljhon

您可以使用Flexbox將實現你想要的結果（如果這是一個選項）。

<div style="background-color:#00ff00; width:200px;"> 
 
    <ul style="list-style:none;"> 
 
     <li style="display:flex;"><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow;">Hit me! Hit me! -Hit me! -</div> </li> 
 
    </ul> 
 
    </div>

編輯：這是你的利潤率版本到位

<div style="background-color:#00ff00; width:200px;"> 
 
    <ul style="list-style:none;"> 
 
     <li style="display:flex;"><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow; margin:2px 0 20px;">Hit me! Hit me! -Hit me! -</div> </li> 
 
    </ul> 
 
    </div>

來源

2017-01-16 18:33:09

喜添巴尼特，其作品的風格=「顯示：彎曲; 但爲什麼是什麼‘？顯示器撓性’做你知道，如果它工作在每一個瀏覽器做我接受你的很快回答 – user1032019

嘗試改變顯示：inline-block的到在線是這樣的：

<html> 
    <div style="background-color:#00ff00; width:200px;"> 
    <ul style="list-style:none;"> 
     <li><span style="margin-right:5px;">> <span style="display: inline; background-color:yellow;"> Hit me! Hit me! -Hit me! -</span> </li> 
    </ul> 
    </div> 
</html>

來源

2017-01-16 18:38:10

< Div>跳到新行

回答

相關問題