Question

抱歉初学者问题。我正在尝试将导航栏放在与元素相同的“线”上。在这种情况下'标题'。基本上只是试图让它出现在标题的一行上。

HTML：

<header role="banner">
            <h1>
            <a href ="#" title="Title" rel ="home">Title</a>
        </h1>
<!--Navigation Start-->
        <nav role ="navigation">
            <div class ="navigation-menu-container">
                <ul id ="navigation-menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Skills &amp; Field of Interests</a></li>
                    <li><a href="#">Articles</a></li>
                    <li><a href="#">Resume</a></li>
                    <li><a href="#">Contact Me</a></li>
                </ul>
                <span></span>
            </div>
        </nav>
    </header>
<!--Navigation End-->

CSS：

a:link{

    text-decoration: underline;
    color: #ecf0f1;

}

a:hover {

   text-decoration: underline;
    color: #ecf0f1;
}

a:visited {

    text-decoration: underline;
    color: #ecf0f1;
h1
{
font-family: 'Lato', sans-serif;
}

    .navigation-menu-container {


        padding: 30px;
        border: 0;
        font-size: 18px;
        font-weight: normal;
        font-family: 'Lato', sans-serif;
    }


    #navigation-menu {

        text-align: justify;
        padding: 20px;

    }

    #navigation-menu * {

        display: inline;
    }

    #navigation-menu li {

        display: inline-block;    
        padding-right: 35px;
    }

    #navigation-menu span {

        display: inline-block;
        position: relative;
        width: 100%;
        height: 0;
    }

Answer 1

将display: inline添加到您的h1代码中。这应该解决它。

它不起作用的原因是默认情况下h1标记设置为display: block，这意味着它们将占用与其父元素一样多的水平空间。

将其设置为display: inline，（或display: inline-block）*会覆盖默认样式，并使其能够与其他“内联”元素“内联”。

这是显示我的观点的jsfiddle。

* inline-block与inline不同，inline不允许您设置宽度或高度。

Answer 2

使用display：inline：

CSS：

h1
{
    display:inline;
}

http://jsfiddle.net/KJKuC/

Answer 3

要使两个块元素对齐（h1和nav），您可以同时生成float: left：http://jsfiddle.net/xPq2Q/1/

在这个例子中，我还调整了一些填充。

如何将<h1>元素放在与导航链接相同的行上？</h1>

3 个答案: