Question

我正在学习CSS，有些事情对我来说永远不会有用。几个小时以来我只需要乱用代码，只是为了得到一些看起来我想要它的东西，这是正常的吗？

我的问题是我无法将导航栏移动到包装器的右侧。

这是我得到的代码：

header {
    height: 100px;

}

header #header-cont {
    width: 1000px;
    margin: 0 auto;
    height: 100px;
    display: -webkit-flex;
    display: flex;
    font-family: 'Sofadi One', cursive;
    }

header img {
    height: 80px;
    width: 80px;
    margin-top: auto;
    margin-bottom:auto;
}

header h1 {
    font-size:32px;
    margin-top: auto;
    margin-bottom:auto;
}

header nav{
}

header nav ul {
    list-style: none;
    display: block;
    height:100px;
}

header ul li {
    display: inline-block;
}
header ul li a{
    text-decoration: none;
    display: block;
    height: 100px;
    line-height: 100px;
}

尝试了很多东西，比如浮动，边距等。

Answer 1

不要使用flex，它几乎不兼容浏览器！

改变这两个;）

header #header-cont {
    widt*h: 1000px;
    margin: 0 auto;
    height: 100px;
    display: block;
    font-family: 'Sofadi One', cursive;
}

header nav {
    float: right;
}

容易 - 无法向右移动导航

1 个答案: