Question

我在自适应CSS网格中有不同大小和x / y比的图像。我需要在每个图像的右上角都有一个✖️按钮。因此，在每个网格单元中，我都放置了一个表单，并在表单内部-一个按钮和一个图像：

<form action="/destroyImage" method="POST">
  <button type="submit" class="close">
    <span>&times;</span>
  </button>
  <img src="/pub/myimage123.jpg"/>
</form>

问题：

如何将按钮的中心放置在图像的一角？
如何获得外观更好的✖️按钮（我使用Bootstrap 4）？

Answer 1

要获得右上角的“ X”，您可以执行以下操作：

.AClass{
    right:0px;
    position: absolute;
}

<form action="/destroyImage" method="POST">
    <div style="position:relative;">
        <button type="submit" class="close AClass">
           <span>&times;</span>
        </button>
        <img src="/pub/myimage123.jpg"/>
    </div>
</form>

要获得更好的十字架，我建议使用Font Awesome或类似的字体。

Answer 2

您可以根据自己的观点调整stringValue = stringValue.Replace(',','.'); double.TryParse(stringValue, NumberStyles.Any, CultureInfo.InvariantCulture, out double doubleValue)

right

button{
  position: absolute;
  z-index: 1;
  right: 0;
}
img {
  position: relative;
  width: 100%;
}

FOR GRID

您可以将<form action="/destroyImage" method="POST"> <div class="1st"> <button type="submit" class="close"> <span>×</span> </button> <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"> </div> <div class="2nd"> <button type="submit" class="close"> <span>×</span> </button> <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"> </div> <div class="3rd"> <button type="submit" class="close"> <span>×</span> </button> <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"> </div> </form>和position-absolute BS4类用于图像和按钮

position-relative

button{
  position: absolute;
  z-index: 1;
  right: 20px;
}

img {
  position: relative;
}

button span {
  color: red; // for testing purpose
}

在CSS网格中图像的一角显示关闭（X）按钮

2 个答案: