Question

我希望导航与 h1 文本处于同一级别，并使其无法移动和调整大小。现在导航就像随机RWD一样，低于我的 h1 文本，然后将显示从left-＆gt; right更改为top-＆gt; bottom。我试图将 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;
}

标题，h1和导航制作导航不可移动

1 个答案: