Question

这让我很生气。

作为一个崭露头角的业余爱好者，我为朋友建了一个网站，我有一个问题。看看这个页面...

http://www.frameconservation.co.uk/gilding.htm

这里有图片，下面有标题。它全部显示我想要的但是当你点击左边的缩略图时，右边的那个跳转到左边。释放鼠标按钮时，使用Thickbox正确打开链接图像，但我无法解决缩略图跳转的原因。

第一项的HTML看起来像这样......

<ul class="photolistbottomcaption">
    <li><a href="images/gilding/Bracket_before_lg.JPG" class="thickbox" rel="gild5" title="before" ><img src="images/gilding/Bracket_before_sml.JPG" alt="" width="290" height="223" title="before" /></a><strong>before</strong></li>
    <li><a href="images/gilding/Bracket_finished_lg.JPG" class="thickbox" rel="gild5" title="after" ><img src="images/gilding/Bracket_finished_sml.JPG" alt="" width="290" height="223" title="after" /></a><strong>after</strong></li>
</ul>

<div class="clear"></div>
      <br />              
      <p><strong>Brackets</strong><br /><strong>Owner</strong>: Private.<br />Pair of worn grotesque brackets needed new gilding after long term storage in a damp cellar and the inexpert attention of the unqualified removed their original gilding.</p>
      <br />
      <hr />

我的CSS看起来像这样

.photolistbottomcaption {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0
    }

.photolistbottomcaption a {
    text-decoration: none;
    color: #003D47
    }

.photolistbottomcaption li {
    float: left;
    margin-right: 6px
    }

.photolistbottomcaption img {
    display: block;
    border: 1px solid #333333
    }

对显示器感到满意，而不是右边的缩略图跳到左边。

非常感谢任何帮助。

干杯

Answer 1

问题出在CSS的另一部分（mike.css - 第115行）

#navi ul a, ul a:visited, ul a:active {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #663300;
    display: block;
    text-decoration: none;
    width: 196px;
}

如果删除width: 196px;，则图片不会向左跳转。

Answer 2

在第115行的 mike.css 中，您已定义：

#navi ul a, ul a:visited, ul a:active {
    text-decoration: none;
    background: none;
    display: block;
    width: 196px;
    color: #663300;
    }

单击链接时ul a:active启动，并将链接宽度设置为196像素（小于图像宽度）。

当鼠标单击缩略图时，右侧的缩略图向左跳转

2 个答案: