0

我的网站有一个带有 ul（带链接）的标题，用于导航栏。

（链接到下图 - 1）

我的一个页面有一个图片库的 ul。模板来自这个网站：http ://www.thecssninja.com/demo/futurebox/v3/

图片库做我想做的事：单击（覆盖）时在页面上打开放大的图片，放大的图片居中，单击屏幕上的任何位置时关闭。问题是 ul 弄乱了我的导航栏。我该如何解决？导航栏已经有一个 ul 类。

（链接到下面的图片 - 2）

这是相关的CSS：

ul li{
display: inline-block;
float: left;
list-style: none;
margin:0.3em;
border:0.1em solid black;
-webkit-border-radius:0.25em;
-moz-border-radius:0.25em;
border-radius:0.25em;
}
ul li:hover { border:0.1em solid red; }

ul li img, ul li label { 
    display: block; 
    cursor: pointer; 
}

ul li input { display: none; }
ul li input:checked + .overlay { display: table; }

.overlay{
width: 100%;
height: 100%;
position: absolute; 
top: 0; 
left: 0; 
display: none; 
z-index: 999;
background: rgb(0,0,0);
background: rgba(0,0,0,0.7);}

.overlay label
{
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
}
    .overlay img,
    .overlay iframe
    {
        display: inline;
        border:0.25em solid white;
        -webkit-border-radius:0.25em;
        -moz-border-radius:0.25em;
        border-radius:0.25em;
    }

这是HTML：

    <div class="text2col">
        <h2>Photo gallery</h2>

<ul>
    <li>
        <label for="futurebox01"><img src="http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" /></label>
        <input type="radio" id="futurebox01" name="gallery" />
        <div class="overlay">
            <label for="close" title="Close futurebox"><img src="http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg.png" alt="The Css Ninja" width="469" height="500" /></label>
        </div>
    </li>
    <li>
        <label for="futurebox02"><img src="http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" /></label>
        <input type="radio" id="futurebox02" name="gallery" />
        <div class="overlay">
            <label for="close" title="Close futurebox"><img src="http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg2.png" alt="The Css Ninja" width="469" height="500" /></label>
        </div>
    </li>
    <li>
        <label for="futurebox03"><img src="http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" /></label>
        <input type="radio" id="futurebox03" name="gallery" />
        <div class="overlay">
            <label for="close" title="Close futurebox"><img src="http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg3.png" alt="The Css Ninja" width="469" height="500" /></label>
        </div>
    </li>
    <li>
        <label for="futurebox04"><img src="http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" /></label>
        <input type="radio" id="futurebox04" name="gallery" />
        <div class="overlay">
            <label for="close" title="Close futurebox"><img src="http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg4.png" alt="The Css Ninja" width="469" height="500" /></label>
        </div>
    </li>
... (more li's)...
</ul>
<div class="clear">&nbsp;</div>

<input type="radio" id="close" name="gallery" />

我还尝试为图片库添加一个 ul 类，通过更改所有ultoul.futurebox并将其添加到网页中的类中，这使导航栏恢复正常，但它不再居中覆盖图像（覆盖在那里，但图像转到页面的顶部，左侧）。

（链接到下图 - 3）

问题（我认为）是覆盖有一个相邻的兄弟连接器：ul li input:checked + .overlay { display: table; }所以在为图片库添加一个类之后。或者......这可能完全是另一个问题，但我不确定。

4

1 回答 1

0

我还没有找到答案，但这个演示做了我想做的一切：http ://www.thecssninja.com/demo/futurebox/

它没有相邻的兄弟连接器，所以我使用它作为模板，并为图片库放入一个名为“futurebox”的 ul 类，这样我的导航栏就不会受到影响。

除了这个的问题是它会遍历您使用“后退”按钮单击的所有图像，而另一个则没有。

于 2012-04-11T20:41:54.830 回答