关于表格TD中的div 里面图片和<span>中文字如何在一行显示

Posted 2023-04-20

table下的td 中有个div，里面的图片和,<span>或者<h2>标签中的文字如何同行显示，就像这个网站中的一样~图片旁边的文字
http://www.yyets.net/index.php

<td>

  <div style="width:200px; height:150px; padding:10px; border:1px solid #000000;">

  <div style="float:left; position:relative; margin:0 10px 10px 0; width:30px; height:30px; background-color:#FF0000;">image</div>

  <h3>title</h3>

  <span>content</span>

  <span>content</span>

  <span>content</span>

  <span>content</span>

  <span>content</span>

  </div>

  </td>

这样子可以实现，里面加了一些背景色和边框是为了方便观察

   楼主补充的，不是大问题，只是设定h3还有span的样式问题，还有跟左边的图片大小有关系，图片高一点，h3、span的行高还有margin之类的设得小一点，span要怎么放都可以，比如把上面的h3替换成<h3 style="margin:0px; line-height:100%;">title</h3>，span就差不多跟图片平行了

参考技术A <td>
<div style="width:200px; height:150px; padding:10px; border:1px solid #000000;">
<div style="float:left; position:relative; margin:0 10px 10px 0; width:30px; height:30px; background-color:#FF0000;">image</div>
<h3>title</h3>
<span>content</span>
<span>content</span>
<span>content</span>
<span>content</span>
<span>content</span>
</div>
</td>

这样子可以实现，里面加了一些背景色和边框是为了方便观察

楼主补充的，不是大问题，只是设定h3还有span的样式问题，还有跟左边的图片大小有关系，图片高一点，h3、span的行高还有margin之类的设得小一点，span要怎么放都可以，比如把上面的h3替换成<h3 style="margin:0px; line-height:100%;">title</h3>，span就差不多跟图片平行了

thymeleaf switch在表格中的使用，遇到的空行问题

switch在表格中的使用时 如果把<td>写在<div th:switch="${data.isShow}"> 里面导致外面出现很多空的<div><p></p></div>，从而导致界面出现空行。放在外面时，显示正常。

 

<td><div th:switch="${data.isShow}">

<p th:case="1">

<input th:id="‘targetId_‘+${data.targetId}" th:value="${data.currTarget}"

th:class="form-control" maxlength="5" style="text-align:center;" title="只能输入1到100的数字，可以有一位小数"></input>

<input th:id="‘targetId_‘+${data.targetId}+‘_hidden‘" th:value="${data.currTarget}"

type="hidden"></input>

</p>

<p th:case="0">

<p th:text="${data.currTarget}"></p>

</p>

</div>

</td>