Question

我试图让3个图像彼此相邻，每个图像之间有一个小空格，我发现代码在线，它与示例代码一起工作，但它对我不起作用？在浏览器中，图像放在另一个上面，两者之间有很大的间隙。

   <?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head><title>pizza</title></head>

<body>
<h1 align="center"><font color="red" face="calibri">buy one get one free </font></h1>
<p align="center"><font color="black" face="calibri">order online for discount <span style="coloryellow">extra toppings,</span><span style="color:green"> stuffed crust</span> and<span style="color:green"> call now</span></font></p>
<br></br>
<br></br>
<div>
  <img src="pcrt1.png"></img>
  <img src="pcrt2.png"></img>
  <img src="pcrt3.png"></img>
   </div>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

Answer 1

我认为CSS可以解决问题。

您是否尝试过添加样式属性？

<style>
img{
  float: left;
  margin-right: 1px;
}
</style>

Answer 2

分配＆＃34;框＆＃34;对每个图像进行分类并添加此css。由于尺寸较大，请确保您的大图像不会自动对齐，因此您只需添加图像的高度即可正常工作。

.box {display: inline-block;
width: 150px;
height: 150px;
margin: 10px;}

为什么我的图片无法正确对齐？

2 个答案: