Twitter Bootstrap響應ul文本換行

這是我在這裏的第一個問題，雖然我使用堆棧溢出作爲常規資源的幫助，它總是讓我回到正軌，直到現在，因爲我已經搜索和搜索，無法找到答案對此。Twitter Bootstrap響應ul文本換行

我有一個響應式佈局，我很努力地讓我的ul保留左邊距，當文本換成更小的屏幕尺寸時，這會導致文字環繞到圖標下的第二或第三行位置而不是維持保證金。我使用引導程序，我的列表還使用圖標標記作爲自舉圖形而不是普通子彈如下;

<ul class="unstyled starlist"> 

<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li> 

<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li> 

<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li> 

<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li> 

</ul>

我的（很簡單），CSS（引導程序以外）是

.startlist li span {Margin-left:15px;}

我已經嘗試了很多不同的方法，其中沒有一個似乎工作，我一直在最接近的是顯示跨度作爲一個阻止文本在圖標下環繞的塊，但圖標不能正確對齊文本並且看起來很糟糕，圖標看起來略微提高。

我還在每個li內使用了2個div，並且左邊內嵌了浮動內容，直到屏幕尺寸縮小，並且一切都變得凌亂，我沒有嘗試媒體查詢，因爲對於簡單列表的想法，必須有更好的方法。我也嘗試了一個列表式圖像，但它不能正確對齊文本。

我目前正在使用一個表（不要打我，這只是一個暫時的最後手段，直到我知道），只是爲了它看起來是正確的，但真的會感激一些幫助，把列表格式適用於所有屏幕尺寸。 Tbh表格佈局看起來很完美，並且對屏幕大小做出了很好的反應，但它並不是表格數據，它的很多代碼只是一個簡單的列表，有一顆星星就是子彈！

我期待任何人的勸告提前史蒂夫（或者被告知一個顯而易見的解決方案，並期待一個白癡！）

非常感謝。

來源

2012-10-23 stevegnewman

難道只是一個錯字？ 'class =「starlist」' – Rockbot

.starlist是我在網站上給出的這種特殊樣式的列表，所以沒有看到任何拼寫錯誤。問候，史蒂夫。 – stevegnewman

是的:)我只是認爲它是寫在CSS和HTML'starlist'和'startlist'不同的... – Rockbot

您是否嘗試過使用:before實現？

事情是這樣的：

.startlist li span:before { 

    content: url(../star.jpg); 

}

來源

2012-10-23 14:12:56 Wez

嗨，謝謝你，但它仍然不包裹正確的文本，它似乎並不是我想要的compatable。請欣賞你的幫助。 – stevegnewman

嘗試設置與一些填充列表項的背景。

ul.fancy-bullets { 
    list-style-type:none; 
} 
ul.fancy-bullets li { 
    background: url(../images/icons/star.png) left top no-repeat; 
    padding-left: 2em; 
}

已經嘗試了很長的一行，它不會在圖標下面。

來源

2012-10-30 09:46:39 freeMagee

下面是解決方案。在您的li文字周圍標上p標籤，將您的p保證金餘額設置爲您想要的值，然後使用overflow:hidden。現在將你的<i>浮起。這應該工作。

例如加價：

#left-column .advantages li {font: normal 14px arial; margin:0 0 10px 0; color:#333; list-style:none;} 
#left-column .advantages li p {margin:0 0 0 20px; overflow:hidden;} 
#left-column .advantages li i {float:left;}

來源

2013-12-04 17:44:21 Joe

Twitter Bootstrap響應ul文本換行

回答

相關問題