将链接div移到h1上方，标语p上方

Question

我有一个包含CSS媒体查询的页面，我被要求这样做：

移动布局：

桌面布局：

现在，HTML代码放置如下：

<div id="content">
  <h1>the title</h1>
  <p>this is the tagline of the site</p>
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
  </ul>
</div>

我在尝试实现桌面布局方面遇到了很大问题。我尝试在<h1>中包装<p>和<div>并使用float: left设置样式，但它并不像请求那样（标语更宽）。我还尝试使用position: absolute <ul>，但也没有按要求查看（使#content更宽不是一个选项。）

您是否有任何建议可以在不使用javascript的情况下实现此目的？

更新

我已将代码上传到my Koding，以便您可以看到我实际在做什么。 This is the CSS。我也使用normalize.css。

我现在遇到的问题是不同的浏览器显示的内容：

我认为问题可能在于浏览器如何计算标语的宽度，但是您可以尝试使用代码，如果您将标语的文字缩短，它看起来更像是Opera＆＃ 39;渲染。

我偶然发现了一个错误，或者我在CSS中犯了一些错误？

Answer 1

在float: left和<h1>中使用<p>。不在<ul>。 之后，将<p>宽度设置为100％，并将上边距设置为<ul>。

要同时获取所有<li>，请将其设置为display: inline。

Answer 2

确保ul有足够的空间让li彼此相邻。

width: 1million px;

Answer 3

不是非常优雅，但你可以试试这样的东西......

<强> CSS

h1, ul, li {
    float: left;
}
h1 {
    height: 48px;
}
p {
    position: absolute;
    margin-top: 48px;
}
ul {
    padding-top: 12px;
}

<强> jsFiddle