LIghtbox图像X关闭按钮对齐图像的右上角

Question

我需要对齐图像右上角的关闭按钮。我试图给出这个位置，但它不接受css。

.lb-closeContainer {
   position: absolute;
   top: -10px;
   right:40px;
 }

对于实际结果，我附上了图像。

Answer 1

.lb-data .lb-close {
display:block;
position:absolute;
right:50px;
top:5px;
/*float: right;*/
}

就像我解决了它

Answer 2

库没有提供API来进行此更改，因此您必须进行hack / monkeypatch它。

修改html。执行此操作的理想方法是更新lightbox.js生成的标记，并使用<a>中的lb-close类移动<div class="lb-container">标记，如下图所示。为此，您可以修改lightbox.js。在第102行，您可以看到生成的标记：https://github.com/lokesh/lightbox2/blob/dev/dist/js/lightbox.js#L102

使用CSS定位。然后你需要应用一些CSS来定位'X'按钮：

position: absolute;
right: 16px;
top: 16px;

哦，请注意，由于移动了lb-close的锚标签，之前设置它的CSS选择器已经更新。现在它只是.lb-close。

Answer 3

来自Lokesh Dhakar的解决方案不太正确，带有lb-close类的标签应放在lb-nav类的末尾，然后按钮将正常工作并显示。另外不要忘记将.lb-nav标签添加到.lb-close，这样就可以这样：.lb-nav a.lb-close {...}