Question

出于某种原因，我的列表中只显示了一个链接？我想不明白。是关闭页面还是什么？

该列表位于页面左侧，ul为id="leftone"。

以下是我的所有编码，请帮助。

CSS：

html, body { height: 100%; }

* { height: 100%; }

body {
    position: relative;
    background: #fffffc;
    margin: auto auto;
    height: 100%;
}

#header {
    background: #e5e5e5;
    height: 35px;
    width: 100%;
    border-bottom: 1px #c9c9c9 solid;
}

#headerlinks {
    position: relative;
    display: inline;
    float: right;
    margin-right: 5%;
    bottom: 44px;
}

#headerlinks li {
    display: inline;
    padding-left: 25px;
}

#headerlinks li a {
    color: #777777;
    display: inline;
    font-size: 18px;
    font-family: sans-serif;
    text-decoration: none;
}

#headerlinks li a:hover {
    color: #a3a3a3;
    display: inline;
    font-size: 18px;
    font-family: sans-serif;
    text-decoration: none;
}


#headerlinks li a:active {
    color: #00B2EE;
    display: inline;
    font-size: 18px;
    font-family: sans-serif;
    text-decoration: none;
}


#logo {
    position: relative;
    color: black;
    margin-left: 5%;
    top: 5px;
}

.logoclass {
    color: #212121;
    display: inline;
    font-size: 24px;
    font-family: sans-serif;
    text-decoration: none;
}

#quicklinks {
    width: 90%;
    margin-left: auto;
    margin-right: auto;;
    height: 25px;
    background: #e5e5e5;
    border-bottom: 1px #c9c9c9 solid;
    border-left: 1px #c9c9c9 solid;
    border-right: 1px #c9c9c9 solid;
    top: -66px;
    position: relative;
    clear: right;
}

#quicklinks li {
    position: relative;
    top: 2px;
    display: inline;
    padding-right: 20px;
}

#quicklinks li a {
    color: #777777;
    display: inline;
    font-size: 13px;
    font-family: sans-serif;
    text-decoration: none;
}

#quicklinks li a:hover {
    color: #a3a3a3;
    display: inline;
    font-size: 13px;
    font-family: sans-serif;
    text-decoration: none;
}

#quicklinks li a:active {
    color: #00B2EE;
    display: inline;
    font-size: 13px;
    font-family: sans-serif;
    text-decoration: none;
}

#wrapper {
    position: relative;
    top: -40px;
    margin-right: 4%;
    margin-left: 4%;
    width: 92%;
    height: 100%;
    background: #fafafa;
    border-left: 1px #c9c9c9 solid;
    border-right: 1px #c9c9c9 solid;
    overflow: hidden;
}

.resources {
    font-family: sans-serif;
    font-size: 16px;
    position: relative;
    margin-left: 6px;
    top: 15px;
}

#leftone li {
    padding-bottom: 5px;
    position: relative;
}

HTML：

<div id="header">
    <div id="logo">
        <a class="logoclass" href="index.html">DesignAtEase.com</a>
    </div>
    <ul id="headerlinks">
        <li><a href="index.html">Home</a></li>
        <li><a href="coding.html">Coding</a></li>
        <li><a href="graphics.html">Graphics</a></li>
        <li><a href="database.html">Database</a></li>
        <li><a href="support.html">Support</a></li>
        <li><a href="more.html">More</a></li>
    </ul>
    <ul id="quicklinks">
        <li><a href="quickstart.html">Quick Start</a></li>
        <li><a href="tagsmain.html">Tag Helper</a></li>
        <li><a href="html.html">HTML</a></li>
        <li><a href="css.html">CSS</a></li>
        <li><a href="photoshop.html">Photoshop</a></li>
    </ul>
</div>
<div id="wrapper">
    <a class="Resources">Resources</a>
    <ul id="leftone">
        <li><a href="quickstart.html">Quick Start</a></li>
        <li><a href="tagsmain.html">Tag Helper</a></li>
        <li><a href="usefulsites.html">Useful Sites</a></li>
    </ul>
</div>

Answer 1

从* { height: 100%; }

中删除position: absolute和#leftone li

请参阅http://jsfiddle.net/c6Fdk/1/

Answer 2

我为li设置了一个高度，并且显示正确。

#leftone li{
padding-bottom:5px;
position:relative;
height:15px;
}

Answer 3

这是因为你有* { height: 100% }

这使得所有元素都具有100％的高度，包括包含链接的li;

Answer 4

删除css文件中的* { height: 100%; }行。

列表中只显示一个链接

4 个答案: