Question

我想在图像上显示多个链接。位于右上角，但所有链接都相互放置。我希望将它们分隔成一行。我使用display：inline。但这不起作用。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
    position: relative;
    text-align: center;
    color: white;
}

.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
    display:inline;

}

</style>
</head>
<body>

<h2>Image Text</h2>
<p>How to place text over an image:</p>

<div class="container">
  <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
  <div class="top-right">Bottom Left</div>
  <div class="top-right">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="top-right">Bottom Right</div>
  <div class="top-right">Centered</div>
</div>

</body>
</html>

Answer 1

您应该在样式标签中同时使用clear：both或overflow：hidden。

在图像上一行显示链接

1 个答案: