在<header> </header>中浮动元素

时间:2013-09-02 17:27:38

标签: html css header

我疯狂地试图让这2个元素在<header>

内的同一行中浮动
<header>
    <h1>Hernan esta con vos</h1>
    <nav>
        <ul class="navigation-list">
            <li><a href="#">Nuestra firma</a></li>
            <li><i class="icon-ellipsis-vertical"></i></li>
            <li><a href="#">Que podemos hacer por vos</a></li>
            <li><i class="icon-ellipsis-vertical"></i></li>
            <li><a href="#">Comunicate con nosotros</a></li>
        </ul>
    </nav>
</header>

这是我的css

header
{
    display: block;
    width: 90%;
    margin: 0em auto;
    padding: 1em;
    text-transform: uppercase;
    overflow: auto;
}

header h1
{
    float: left;
}

header nav
{
    float: left;
}

.navigation-list
{
    margin: 0em;
    padding: 0em;
    list-style: none;
    text-align: center;  
}

.navigation-list li
{
    display: inline-block;
    letter-spacing: 0.10em;
    padding: 0em 0.25em;
}  

有人可以帮我实现吗?

非常感谢大家。欢呼声。

1 个答案:

答案 0 :(得分:0)

看起来你是漂浮导航而h1是左边的。你的元素在净资产值内。

尝试

 nav {
   float:right
   display:inline-block
   width:75%
   position:relative

   }     

nav ul li {
display:inline;
}