Question

我喜欢让我的例子 - 一个更大，以便我可以在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>

Answer 1

您的HTML无效。 ul应该只有li个孩子，而li应该只有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组合在一起。只需将样式直接应用于ul或li。

Answer 2

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

Here is the Fiddle

首先，我更改了您的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甚至是油漆刷原始图像..

干杯。

增加css和html中div的大小

2 个答案: