Question

这是页面的外观：

第一个问题，那个

如果你仔细观察它，它有点透明，我们可以看到这个ul里面的div主要是ul。

第二，如果我们放大浏览器......就会发生这种情况

我希望这个文字没有nowrap，只有3和4 li元素不适合这个缩放的屏幕，我们不会看到这个。

最后

我希望主要适合我们获得的屏幕的其余部分（至少其余部分，直到没有宽度或高度的内容更多）

看起来像这样：

主要是在网站上的最小填充剩余空间，并且我不想通过全身背景颜色声明来完成。

整个代码：

HTML：

<body>
    <div id="header">
    <ul>
        <li><a href="#">Nazwa Strony</a></li>
        <li><a href="#">0 Komentarze do moderacji</a></li>
        <li><a href="#">Dodaj nowy</a>
        <ul>
            <li><a href="#">Post</a></li>
            <li><a href="#">Stronę</a></li>
            <li><a href="#">Media</a></li>
        </ul>
        </li>
        <li><a href="#">Usuń cały cache</a></li>
    </ul>
    </div>
    <div class="clear"></div>
    <div id="aside">
        <ul>
            <li><a href="#">Deszbord</a></li>
            <li><a href="#">Posty</a></li>
            <li><a href="#">Strony</a></li>
            <li><a href="#">Media</a></li>
            <li><a href="#">Wygląd</a></li>
            <li><a href="#">Użytkownicy</a></li>
            <li><a href="#">Ustawienia</a></li>
        </ul>
    </div>
    <div class="clear"></div>
    <div id="main">
    asdasdasd
    </div>
</body>


#header {
    position: fixed;
    top: 0;
    height: 20px;
    width: 100%;
    background-color: #23282d;
    padding: 10px 0px;
    z-index: 100;
}
#header a {
    color: #ccc;
    text-decoration: none;
}
#header ul, #header ul li ul{
    list-style: none;
    margin: 0px;
}
#header ul li {
    float: left;
    margin-right: 70px;
}
#header ul li ul {
    padding: 0px;
    text-align: center;
    display: none;
    border: 1px solid #FFF;
    background-color: #EEE;
    border-radius: 2px;
    margin-top: 5px;
}

#header ul li ul a {
    color: #000;
}
#header ul > li:hover > ul {
    display: block;
}
#header ul li ul li {
    float: none;
    margin: 0px;
    margin-top: 15px;
    margin-bottom: 15px;
}
#aside {
    left: 0;
    position: fixed;
    width: 170px;
    height: 100%;
    top: 40px;
    background-color: #323435;
    border-top: 2px dotted #333;
}
#aside ul {
    list-style: none;
    padding-left: 10px;
}
#aside ul li {
    margin-bottom: 15px;
}
#aside ul li a {
    color: #ccc;
    text-decoration: none;
}
#header a:hover, #aside a:hover{
    color: #2295cc;
}
#main {
    background-color: #f1f1f1;
    width: 100%;
    height: 100%;
    position: relative;
    top: 40px;
    left: 170px;
}
.clear {
    clear: both;
}

＆＃13;

#header {
    position: fixed;
    top: 0;
    height: 20px;
    width: 100%;
    background-color: #23282d;
    padding: 10px 0px;
    z-index: 100;
}
#header a {
    color: #ccc;
    text-decoration: none;
}
#header ul, #header ul li ul{
    list-style: none;
    margin: 0px;
}
#header ul li {
    float: left;
    margin-right: 70px;
}
#header ul li ul {
    padding: 0px;
    text-align: center;
    display: none;
    border: 1px solid #FFF;
    background-color: #EEE;
    border-radius: 2px;
    margin-top: 5px;
}

#header ul li ul a {
    color: #000;
}
#header ul > li:hover > ul {
    display: block;
}
#header ul li ul li {
    float: none;
    margin: 0px;
    margin-top: 15px;
    margin-bottom: 15px;
}
#aside {
    left: 0;
    position: fixed;
    width: 170px;
    height: 100%;
    top: 40px;
    background-color: #323435;
    border-top: 2px dotted #333;
}
#aside ul {
    list-style: none;
    padding-left: 10px;
}
#aside ul li {
    margin-bottom: 15px;
}
#aside ul li a {
    color: #ccc;
    text-decoration: none;
}
#header a:hover, #aside a:hover{
    color: #2295cc;
}
#main {
    background-color: #f1f1f1;
    width: 100%;
    height: 100%;
    position: relative;
    top: 40px;
    left: 170px;
}
.clear {
    clear: both;
}

＆＃13;

<body>
    <div id="header">
    <ul>
        <li><a href="#">Nazwa Strony</a></li>
        <li><a href="#">0 Komentarze do moderacji</a></li>
        <li><a href="#">Dodaj nowy</a>
        <ul>
            <li><a href="#">Post</a></li>
            <li><a href="#">Stronę</a></li>
            <li><a href="#">Media</a></li>
        </ul>
        </li>
        <li><a href="#">Usuń cały cache</a></li>
    </ul>
    </div>
    <div class="clear"></div>
    <div id="aside">
        <ul>
            <li><a href="#">Deszbord</a></li>
            <li><a href="#">Posty</a></li>
            <li><a href="#">Strony</a></li>
            <li><a href="#">Media</a></li>
            <li><a href="#">Wygląd</a></li>
            <li><a href="#">Użytkownicy</a></li>
            <li><a href="#">Ustawienia</a></li>
        </ul>
    </div>
    <div class="clear"></div>
    <div id="main">
    asdasdasd
    </div>
</body>

＆＃13;

html和css的一些麻烦我无法解决

0 个答案: