Question

我正在尝试将<header>三个div放入页面左上角的div1（logo），页面顶部中心的nav2（菜单栏）和div3（社交网络）页面的右上角，但我不知道该怎么做。我试过这段代码（html）：

<header>
    <div id="logo"></div>
    <nav>
        <ul>
            <li><a></a></li>
        </ul>
    </nav>
    <div id="links">
        <a></a>
    </div>
</header>

和css：

nav{
    background-color: #215177;
    border: 1px solid #215177;
    color: white;
    display: block;
    margin: 0;
    overflow: hidden;
    position: fixed;
    width: 100%;
}

#logo{
    height: 120px;
    width: 50px;
    float: left;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

nav ul li {
    margin: 0;
    display: inline-block;
    list-style-type: none;
    transition: all 0.2s;
}

nav > ul > li > a {
    color: white;
    display: block;
    line-height: 2em;
    padding: 0.5em 2em;
    text-decoration: none;
}

#links{
    float: right;
    position: absolute;
    top:0;
}

Answer 1

你肯定缺少很多代码，并且取决于这是否会在Mobile中使用，将是另一个问题。

这是一个很好的起点，请确保您在布局中开始和结束所有DIVS和内容，否则，您将无法正确显示成品。

Here is a working example, of close to what you want，使用相同的类和ID＆＃39; s：

<header> 
<div id='logo'>Logo</div> 
<nav> 
    <ul> 
        <li> 
            <a href='#0'>Home</a>
        </li>

        <li>
            <a href='#0'>About</a>
        </li>
        <li>
            <a href='#0'>Blog</a>
        </li>
        <li>
            <a href='#0'>Contact</a>
        </li>
    </ul>
</nav>    
<div id='links'>Links go here</div>
<div class='clear'></div>              
</header>

我还在示例中添加了一些基本的CSS以及一个很好的起点。

Answer 2

试试这个：

<div id="top">
    <header> 
        <div id="logo"></div> 
        <nav> 
            <ul> 
                <li> 
                    <a></a> 
                </li> 
            </ul> 
        </nav> 
        <div id="links">
            <a></a>
        </div> 
    </header>
</div>

和css：

#top{
    width:100%;
}
#logo{
    width:9%;
    float:left;
}
nav{
    width:78%;
    float:left;
}
#links{
    width:9%;
    float:right;
}

注意如果您看到导航+链接+徽标的总宽度不是100％，以防您在CSS中应用了填充。

我怎样才能将两个div和一个nav放入左上角，顶部中心和右上角的标题中

2 个答案: