如何使用 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

在a

中添加float:left;

#image {
  display: inline-block;
  width:1000px;
  clear:both;
}
#image > a{
  float: left;
  display:inline-block;
}

<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>

Answer 2

这里。正确的 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>

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

How to use HTML/CSS to show images and titles inline?

html

css

inline

image