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>

如何在我创建的栏中的图片前放置图片

2 个答案: