html - 如何使用 HTML/CSS 内联显示图像和标题？

Question

我有 2 张图片想并排显示，上面的标题作为超链接的一部分。

  <div id="image">

  <a href="file:///L:/file" style="text-decoration:none;"  Title="Project Reports">
  <p>New Reports</p>
  <img src="http://tableau/" style="width:304px;height:228px;" /> 
  </a>       


  <a href="file:///L:/file2" style="text-decoration:none;" >
  <p>Project Reports</p>
  <img src="http://tableau/" style="width:304px;height:228px;"/>
  </a>

如果我删除标题周围的 p 标签，它会内联显示，但我需要标题位于图像的顶部。

CSS:

  #image {
  display: inline-block;
  float: left;
  }

Answer 1

这里。正确的 HTML 和 CSS。

a {
  display: inline-block;
 text-decoration: none;
  }

<div id="image">
 <a href="file:///L:/file" title="Project Reports">New Reports<br>
  <img src="http://tableau/" style="width:304px;height:228px;" /> 
  </a>      


  <a href="file:///L:/file2">Project Reports<br>
  <img src="http://tableau/" style="width:304px;height:228px;"/>
  </a>
</div>