html - CSS - 在图像上的无序列表中停止文本换行

Question

我有一个 <ul>这迫使文本环绕 <li> 中的图像.最好的格式化方式是什么，这样我就可以添加尽可能多的文本而不需要任何文本换行？我想不通。

<div id="services_banner"><strong>The Amazing Benefits You Get When You Use Advanced Litho</strong></div>
             <span> <img src="../Img/Edits/banner_edge.png"> </span>    
                <div id="our_services">
                     <ul>

                    <li>
                      <img src="http://www.grifolsorderdesk.com/wp-content/uploads/2015/12/personal_services_icon.png" />
                      <h3>Personal Service</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         </p>
                    </li>
                    <li>
                      <img src="http://www.grifolsorderdesk.com/wp-content/uploads/2015/12/online_quote_icon.png" />
                      <h3>Online Instant Quotes</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                      </p>
                    </li>
                    <li>
                      <img src="http://www.grifolsorderdesk.com/wp-content/uploads/2015/12/convenience_icon_2.png" />
                      <h3>Convenience You Can't Beat</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                      </p>
                    </li>
                    <li>
                      <img src="http://www.grifolsorderdesk.com/wp-content/uploads/2015/12/shipping_icon.png" />
                      <span><h3>Fast & Reliable Shipping</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                      </p></span>
                    </li>

                    </ul>
                </div>

                <div id="contact_support">

                    <img src="http://www.grifolsorderdesk.com/wp-content/uploads/2015/12/tech_support.png">
                    <div id="call_box">
                    <p><strong>Call (949) 215-9060</strong><br> to talk to one of our printing experts.</p>
                    </div>
                </div>

这是我的 Demo

Answer 1

这些图像确实应该是背景图像，在这种情况下，您可以将它们放在左侧，然后在 <li> 上添加 padding-left|因此文本与图像保持清晰。

我在这里玩过:https://jsfiddle.net/3keL0znm/7/