如何将图片放在我创建的栏中的文本前面

Question

我有一个简单的问题，我无法解决。我必须在我的酒吧里的文字前面放一张照片。

有人能帮我吗？

我正试图在"愚蠢的"面前得到图像

我需要使用CSS吗？

这是我的代码：

img {    max-width: 100%;    height: auto; }

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<center><title>De Soete Suikerbol</title></center>
<ul data-role="listview" class="ui-listview"> 
<li class="ui-li-has-thumb ui-first-child">
<a href="#pag2" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
<img src="groente1.jpg">
<h2>Bloemkool</h2><p>€ 1 per stuk</p></a>
</li>
<li class="ui-li-has-thumb">
<a href="#pag3" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
<img src="groente2.jpg">
<h2>Paprika</h2><p>€ 1,49 per 3 stuks</p></a>
</li>
<li class="ui-li-has-thumb ui-last-child">
<a href="#pag4" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
<img src="groente3.jpg">
<h2>Spruitjes</h2><p>€ 0,99 per 500 gram</p></a>
</li>
</ul>
</div></div>

<div data-role="page" id="pag1">
<center><div data-role="header"> De Soete Suikerbol </div> 
<div data-role="collapsible">
<h1>Kies uw brood</h1>  
<ul data-role="listview">
<li><a href="#">Witbrood</a></li>  
</ul>
<ul data-role="listview">
<li><a href="#">Bruinbrood</a></li>
</ul>
<ul data-role="listview">
<li><a href="#">Krentenbrood</a></li>
</ul>  
</div>
<div role="main" class="ui-content">
<img src="img/brood.jpg" </div>
<p> Welkom op de website van de Soete Suikerbol. <br> Op deze site vind je informatie over brood & banket!</p>
</div>
<div data-role="navbar">
<div data-role="main" class="ui-content">
<center>
<a href="index.html" data-transition="flow" class="ui-btn ui-btn-inline">Home</a>
<a href="banket.html" data-transition="flow" class="ui-btn ui-btn-inline">Banket</a>    </center>
</div>
</div>
<div data-role="footer">
<h1> © Thom Hendriks </h1>
</div>
</div>
</div>
</div>

Answer 1

如果你想把文本放在图像前面，你可以使用背景图像

Answer 2

您可以尝试使用img，如下所示：

ul li img {
width: 20px;
padding-right: 10px;
vertical-align: bottom;
}

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<center>
<title>De Soete Suikerbol</title>
</center>
<ul data-role="listview" class="ui-listview">
<li class="ui-li-has-thumb ui-first-child">
<a href="#pag2" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
<img src="groente1.jpg">
<h2>Bloemkool</h2>
<p>€ 1 per stuk</p>
</a>
</li>
<li class="ui-li-has-thumb">
<a href="#pag3" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
<img src="groente2.jpg">
<h2>Paprika</h2>
<p>€ 1,49 per 3 stuks</p>
</a>
</li>
<li class="ui-li-has-thumb ui-last-child">
<a href="#pag4" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
<img src="groente3.jpg">
<h2>Spruitjes</h2>
<p>€ 0,99 per 500 gram</p>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="pag1">
<center>
<div data-role="header"> De Soete Suikerbol </div>
<div data-role="collapsible">
<h1>Kies uw brood</h1>
<ul data-role="listview">
<li>
<a href="#"> <span><img src="https://via.placeholder.com/150"></span><span>Witbrood</span></a>
</li>
</ul>
<ul data-role="listview">
<li>
<a href="#"> <span><img src="https://via.placeholder.com/150"></span><span>Bruinbrood</span></a>
</li>
</ul>
<ul data-role="listview">
<li>
<a href="#"> <span><img src="https://via.placeholder.com/150"></span><span>Krentenbrood</span></a>
</li>
</ul>
</div>
<div role="main" class="ui-content">
<img src="img/brood.jpg" </div>
<p> Welkom op de website van de Soete Suikerbol. <br> Op deze site vind je informatie over brood & banket!</p>
</div>
<div data-role="navbar">
<div data-role="main" class="ui-content">
<center>
<a href="index.html" data-transition="flow" class="ui-btn ui-btn-inline">Home</a>
<a href="banket.html" data-transition="flow" class="ui-btn ui-btn-inline">Banket</a> </center>
</div>
</div>
<div data-role="footer">
<h1> © Thom Hendriks </h1>
</div>
</div>
</div>
</div>