我是使用CSS的完整的新手,并且努力了解做事情的正确方法。在线上有很多示例,但是它们似乎都有些不同。我对自己的标记有一些特定的问题。但总的来说这也是正确的方法吗?

我的CSS对我来说是肿的吗?
我的溢出命令导致滚动条,但我不知道为什么
我的顶部菜单左侧有一个较大的填充,我想这与li + li有关,但是我如何摆脱它
我的Divs布局是实现即时尝试的最佳方法吗?使用margin-top 70强制按下第二个菜单对我来说似乎不是最好的方法,是否没有像float bottom或valign bottom这样的东西?

任何使我从右脚开始的指导都将不胜感激。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<link rel="stylesheet" href="styles.css">

</head>
<body>

<div class="wrapper">

    <div class="logo">
    logo

    </div>
    <div class="top-menu">
        <ul>
            <li>Lorum</li>
            <li>Blog</li>
            <li>Contact us</li>
        </ul>

    </div>

    <div class="main-menu">
        <ul>
            <li>About Us</li>
            <li>Countries
            <li>Vacancies</li>
            <li>About Us</li>
            <li>Countries
            <li>Vacancies</li>
        </ul>
    </div>

</div>

</body>
</html>


    .wrapper {
    background-color: aqua;
    width: 600px;
    overflow: auto;
    padding: 5px;
}

.logo {
    background-color: black;
    height: 100px;
    width: 100px;
    float: left;
}

.top-menu {
    background-color: blue;
    float: right;
    line-height: 5px;
}

.top-menu > ul {
    line-style:  none;
}

.top-menu > ul > li {
    display: inline-block;
}

.top-menu  li + li:before{
    content: " | ";
    padding: 0 10px;
}

.main-menu > ul {
    line-style:  none;
}

.main-menu > ul > li {
    display: inline-block;
    padding-right: 10px;
}

.wrapper {
    background-color: aqua;
    width:100%;
    overflow: auto;
    padding: 5px;
}

.top-menu {
    background-color: blue;
    float: right;
    line-height: 5px;
}

.main-menu {
    font-family: arial;
    font-szie: 14px;
    background-color: crimson;
    clear: right;
    margin-top: 70px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

最佳答案

.wrapper类以不同的宽度重复。许多其他类是重复的。

注意代码清理:)

无论如何,主菜单中的ul边缘从div流出,从而创建了滚动条。
如果需要,可以使用浏览器中的inspect元素(例如chrome)找到此问题:https://developer.chrome.com/devtools/docs/dom-and-styles



.logo {
    background-color: black;
    height: 100px;
    width: 100px;
    float: left;
}

.wrapper {
    background-color: aqua;
    width:100%;
    overflow: auto;
    padding: 5px;
}

.top-menu {
    background-color: blue;
    float: right;
    line-height: 5px;
}

.top-menu::after {
    clear: both;
}

.main-menu {
    font-family: arial;
    font-size: 14px;
    background-color: crimson;
    clear: right;
    margin-top: 70px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.top-menu > ul > li {
    display: inline-block;
}

.top-menu  li + li:before{
    content: " | ";
    padding: 0 10px;
}

.main-menu > ul {
    margin: 0;
}

.main-menu > ul > li {
    display: inline-block;
    padding-right: 10px;
}

<div class="wrapper">

    <div class="logo">
        logo
    </div>


    <div class="top-menu">
        <ul>
            <li>Lorum</li>
            <li>Blog</li>
            <li>Contact us</li>
        </ul>
    </div>

    <div class="main-menu">
        <ul>
            <li>About Us</li>
            <li>Countries</li>
            <li>Vacancies</li>
            <li>About Us</li>
            <li>Countries</li>
            <li>Vacancies</li>
        </ul>
    </div>


</div>





http://jsfiddle.net/n3wurcpx/

10-06 04:40
查看更多