0

我有一个包含 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 的情况下实现这一目标吗？

更新：

我已将代码上传到我的 Koding，因此您可以看到我实际在做什么。这是 CSS。我也在使用normalize.css。

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

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

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

4

3 回答 3

1

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

为了让所有<li>并排，您将它们设置为display: inline.

于 2012-09-27T22:43:40.137 回答
0

确保ul有足够的空间将li' 放在一起。

width: 1million px;
于 2012-09-27T22:32:30.883 回答
0

不是很优雅，但你可以尝试这样的事情......

CSS

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

jsFiddle

于 2012-09-27T22:55:27.423 回答