在圖標圖像中的LI中的響應文字寬度

我有一個產品的列表，我想在每個項目的左側用拇指圖標進行顯示。在圖標圖像中的LI中的響應文字寬度

如何將產品說明顯示在右側，而無需在較小的屏幕上包裝文字。

HTML

<ul> 
    <li class="cf"> 
     <span id="customizeImage1" class="product-customize-image"></span> 
     <div class="product-menu-txt"> 
     <a href="/Product/Customize/769497">Friend Maker - Serves 8-10</a> 
     ($14.99)<br> 
     6 Donuts<br> 
     6 Bagel &amp; Cream Cheese - 1 (8oz) tub<br> 
     An assortment of our most favored varieties. 
     </div> 
    </li> 
    </ul>

CSS

* { 
    margin:0; 
    padding:0; 
    font-family: Tahoma,Sans-Serif; 
} 

.cf:before, 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.cf:after { 
    clear: both; 
} 

/** 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 
.cf { 
    *zoom: 1; 
} 

li { 
    width: 100%; 
    list-style-type: none; 
    padding: 10px 0; 
} 

.product-customize-image { 
    width:120px; 
    height:120px; 
    background:red; 
    display:block; 
    float:left; 
    margin: 0 10px; 
} 

.product-menu-txt { 
    float: left; 
    width: 50%; 
}

http://jsbin.com/girum/4/edit

wrapped text on smaller screen

Text that fits the width of the row

來源

2014-11-04 BillPull

使用媒體查詢，對齊文本右邊來處理這 – 2014-11-04 05:42:55

最好的辦法是使用媒體查詢，以便所有的設備呈現適當。 – Subhranshu 2014-11-04 06:39:48

最簡單的就是使用table佈局，圖片和文字顯示爲table-cell s。

相關CSS：

li { 
    display: table; 
} 

.product-customize-image { 
    display:table-cell; 
} 

.product-menu-txt { 
    display: table-cell; 
    padding-left: 8px; 
}

演示：http://jsbin.com/banuvoharo/1/

來源

2014-11-04 05:49:04 Abhitalks

這些似乎解決了我的文字問題，但現在如果我使用圖像精靈，第二個精靈下面顯示 – BillPull 2014-11-04 14:25:20

修復跨度的大小。 – Abhitalks 2014-11-04 14:28:01

看起來像跨度的高度是由表中最大的表格單元格的高度控制的，這將是文本。我仍然認爲這個答案是正確的，可能需要在精靈上加上填充或將圖像包裝在一個容器中，然後顯示：table-cell – BillPull 2014-11-04 14:33:01

在圖標圖像中的LI中的響應文字寬度

回答

相關問題