css - 标题、h1 和导航- 使导航不可移动

Question

我想使导航与 h1 文本处于同一级别，并使其不可移动和调整大小。现在导航就像随机 RWD，在我的 h1 文本下方，然后将显示从左->右更改为顶部->底部。我试图将 ul 位置设置为静态/绝对/固定，但似乎没有任何效果。

JsFiddle 示例:https://jsfiddle.net/26tx3t3p/1/ .

HTML:

<header>        
    <h1 class="logo">   myexamplesite</h1>
    <nav class="primary">
        <ul>
            <li><a href="#">info1</a>/</li>
            <li><a href="#">info2</a>/</li>
            <li><a href="#">info3</a></li>
        </ul>
    </nav>

</header>

CSS:

.logo{
font-size:36px;
font-weight:bold;
float: left;
display:inline-block;
}

a{
text-decoration:none;
}

.primary ul{
float:right;
display:inline-block;
}

.primary ul li{
float:left;
font-size:18px;
padding:10px 15px 0 0;
}

如何在调整窗口大小后将导航设置在开始位置？？ 有没有办法做到这一点，而不需要设置严格的边距/宽度值？？

Answer 1

你的意思是这样吗https://jsfiddle.net/26tx3t3p/3/

我添加了这些CSS

header {
  position:relative;
}
nav {
  position:absolute;
  right:0;
}