Question

我是CSS的完全新手，我很难知道做正确的事情是什么。在线有很多例子，但它们看起来有点不同。我对我的标记有一些具体问题。但一般来说也是正确的方式吗？

我的CSS对我来说是臃肿的吗？我的溢出命令导致滚动条，但我不知道为什么我的顶级菜单左侧有一个大填充，与我猜的li + li有关，但我怎么摆脱它我的Divs布局是实现我想要做的事情的最佳方式。使用margin-top 70强制关闭第二个菜单对我来说似乎不是最好的方法，是不是有浮动底部或valign底部的东西？

非常感谢任何让我从右脚开始的指导。

<!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;
}

Answer 1

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

注意代码清理：）

无论如何，主菜单中的ul边距从div中流出，创建了滚动条。如果需要，您可以使用浏览器中的inspect元素（例如chrome：https://developer.chrome.com/devtools/docs/dom-and-styles

）找到此问题

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

http://jsfiddle.net/n3wurcpx/

关于我的CSS标题菜单的几个问题

1 个答案: