0

I'm trying to create a responsive layout, with a left-hand sidebar that collapses on narrower screens. Something a bit like http://purecss.io/ but with a fixed top header as well.

My work so far (the code is really too long to reproduce here): http://jsbin.com/uhalic/3/edit

There are two problems that I'm struggling to fix (NB you'll need to make the HTML section wider than 450px to reproduce these):

(1) The last elements of the list are being shifted sideways, for no reason I can understand.

enter image description here

(2) The footer should be visually contained entirely within the #main (red section), and indeed that's where it is semantically, but the text is falling partly into the #sidebar (blue section).

enter image description here

What am I doing wrong?

4

1 回答 1

1

这是因为红色列的左侧没有<li>元素，所以<li>红色部分实际上有 4 个元素被倾斜，两个在每个可见元素的左侧但被隐藏。

您需要margin-left: 160px在.results类中添加一个。然后从width: 100%.result 中删除，或者如果您要保留它，请将其设置为 100%。

另外，添加margin-left: 200px到#footer

于 2013-07-23T14:09:59.667 回答