0

我喜欢让我的示例更大，以便我可以在 div1、div2、div3 和 div4 下并排放置 2 个或更多图像。现在，示例一的宽度似乎是固定的，每次我尝试设置宽度时，它都会把页面搞砸。我无法弄清楚这一点。非常感谢任何帮助。

CSS：

#example-one {
    background: inherit;
    padding: 10px;

    -moz-box-shadow: 0 0 5px #666;
    -webkit-box-shadow: 0 0 5px #666;
    margin: auto;

}

#example-one .nav {
    overflow: hidden;
    margin: 0 0 0 0;


}

    #example-one .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
    #example-one .nav li.last { margin-right: 0; }
    #example-one .nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: in; text-align: center; border: 0; }
    #example-one .nav li a:hover { background-color: #111; }

    #example-one ul { list-style: none; }
    #example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
    #example-one ul li a:hover { background: #fe4902; color: white; }
    #example-one ul li:last-child a { border: none; }

    #example-one ul li.nav-one a.current, #example-one ul.featured li a:hover { background-color: #0575f4; color: white; }
    #example-one ul li.nav-two a.current, #example-one ul.core li a:hover { background-color: #d30000; color: white; }
    #example-one ul li.nav-three a.current, #example-one ul.jquerytuts li a:hover { background-color: #8d01b0; color: white; }
    #example-one ul li.nav-four a.current, #example-one ul.classics li a:hover { background-color: #FE4902; color: white; }

这是html：

<div id="example-one" style="margin: 0 auto;">

<ul class="nav" style="margin:auto;">
    <div id="tab-section" style="position:absolute;left:50%;">
    <li class="nav-one"><a href="#div1" class="current">Content1</a></li>
    <li class="nav-two"><a href="#div2">Content2</a></li>
    <li class="nav-three"><a href="#div3">Content3</a></li>
    <li class="nav-four last"><a href="#div4">Content4</a></li>
    </div>
</ul>
<ul id="div1">
    <li id="section1></li>
    <li id="section2></li>
    <li id="section3></li>
    <li id="section4></li>
</ul>
<ul id="div2" class="hide">
</ul>
<ul id="div3" class="hide">
</ul>
<ul id="div4" class="hide">
</ul>

4

2 回答 2

1

您的 HTML 无效。uls 应该只有li孩子，lis 应该只有ul或ol父母。

此外，您尝试使用</div2>结束<div>标记，并且<div id="section1>缺少结束引号。

嵌套列表应如下所示：

<ul>
    <li>some optional text here
        <ul>
            <li>some more text</li>
            <li>some more text</li>
        </ul>
    </li>
</ul>

由于ul和li是块级元素，通常不需要将它们与div. 只需将样式应用于ulorli即可。

于 2013-02-27T16:52:07.413 回答
0

我不知道你在找什么，但我做了以下事情：

这是小提琴

首先，我更改了您的 HTML
- 出现了一些错误，例如<li id="section1></li>总是关闭“，例如<li id="section1"></li>
- 更改了 div 的位置，因此它们不会嵌套在<ul>标签内
- 其他一些事情，比如我认为你说的“图像”将是程序化的选择所以我添加了背景图像的东西。

这里是HTML：

<div id="example-one" style="margin: 0 auto;">

    <div id="tab-section" style="position:absolute;left:50%;">
        <ul class="nav" style="margin:auto;">  
            <li class="nav-one"><a href="#div1" class="current">Content1</a></li>
            <li class="nav-two"><a href="#div2">Content2</a></li>
            <li class="nav-three"><a href="#div3">Content3</a></li>
            <li class="nav-four last"><a href="#div4">Content4</a></li>
        </ul>
    </div>
    <ul id="div1" class="hide">
        <li id="section1">One</li>
        <li id="section2">Two</li>
        <li id="section3">Three</li>
        <li id="section4">Four</li>
    </ul>
    <div id="div2" class="hide" style="background-image:url('http://dribbble.s3.amazonaws.com/users/31348/screenshots/961313/dkng_shirt_2_1x.jpg')"></div>
    <div id="div3" class="hide" style="background-image:url('http://dribbble.s3.amazonaws.com/users/52758/screenshots/962057/new_york_ptiii_j_fletcher_1x.jpg')"></div>
    <div id="div4" class="hide" style="background-image:url('http://dribbble.s3.amazonaws.com/users/62174/screenshots/961388/aliens.jpg')" ></div>
</div>

我假设您正在使用:target选择器来激活 effetc，所以我将 CSS 更改为：

#example-one {
    background: inherit;
    padding: 10px;
    height:300px;

    -moz-box-shadow: 0 0 5px #666;
    -webkit-box-shadow: 0 0 5px #666;
    margin: auto;
}

#example-one .nav {
    overflow: hidden;
    margin: 0 0 0 0;
}

#example-one .nav li { 
    width: 97px; 
    float: left; 
    margin: 0 10px 0 0;
}
#example-one .nav li.last { 
    margin-right: 0; 
}
#example-one .nav li a {
    display: block; 
    padding: 5px; 
    background: #959290; 
    color: white; 
    font-size: in; 
    text-align: center; 
    border: 0; 
}
#example-one .nav li a:hover { 
    background-color: #111; 
}

#example-one ul {
     list-style: none; 
}
#example-one ul li a { 
    display: block; 
    border-bottom: 1px solid #666; 
    padding: 4px; 
    color: #666; 
}
#example-one ul li a:hover { 
    background: #fe4902; 
    color: white; 
}
#example-one ul li:last-child a { 
    border: none; 
}
#example-one ul li.nav-one a.current,
#example-one ul.featured li a:hover { 
    background-color: #0575f4; 
    color: white; 
}
#example-one ul li.nav-two a.current, 
#example-one ul.core li a:hover { 
    background-color: #d30000; 
    color: white; 
}
#example-one ul li.nav-three a.current, 
#example-one ul.jquerytuts li a:hover { 
    background-color: #8d01b0; 
    color: white; 
}
#example-one ul li.nav-four a.current, 
#example-one ul.classics li a:hover { 
    background-color: #FE4902; 
    color: white; 
}

.hide{
    width:300px;
    height:300px;
    background-size:cover;
    background-position:center center;
    display:none;
}

#div1:target ,#div2:target, #div3:target, #div4:target{
    display:inline-block;
}

如果这不是您需要的，请给我们一些关于效果、Js Fiddle甚至是画笔原始图像的更详细的反馈。

干杯。

于 2013-02-27T17:45:10.947 回答