html - 试图调和绝对位置 UL 与左浮动

Question

我是编码的新手，意识到可能有一个非常简单的解决方案可以解决我的问题。我通过对 DIV #container 中的每个切片使用绝对定位将 Photoshop 切片导入 Dreamweaver(这是我教授指导我的方式。)

http://s1292.photobucket.com/user/ajp2487/media/Screen%20Shot%202015-04-10%20at%209.04.27%20AM_zpsbaeyzcdf.png.html

我想通过 CSS(蓝色文本)在占位符切片(浅灰色文本)上创建水平导航。为此，我为链接创建了一个 DIV ul li。

http://i1292.photobucket.com/albums/b578/ajp2487/ss_zpswqnc75pl.png~original

我意识到当使用绝对定位时，你不能 float 一个元素。但是，当我从 .nav, ul 中删除绝对定位、尝试相对 positiong 等时，ul 消失了(可能在切片后面)并移动了我现有的切片。当我使用绝对定位时，float left 命令变得毫无用处。现在一切正常，除了我需要 ul 水平流动，而不是垂直流动!

必须有一个简单的解决方案；我准备撕掉我的头发，任何帮助将不胜感激。请尽量简单回答!

Answer 1

显示:内联 block ；如果您不能使用花车，也可以完成这项工作。把float放在li上不就不行了吗？

nav li {
  display: inline-block;
}

举个例子: http://codepen.io/anon/pen/xboPxB

还有几点需要注意(虽然我完全理解使用 Dreamweaver 的要求，并且由于类(class)作业以一种奇怪的方式做事)，position: absolute;可能会很危险并且会破坏布局，我相信您会发现这一点；尽管我不会讨论这个，除非你有任何问题，因为你提到这是你的导师的问题。

行高实际上应该是无单位的 - 可以将其视为行高 * 字体大小。如果您的字体大小是 20px(或 1em)并且 line-height 需要显示为 40px(或 2em)，则 line-height 为 2。

希望我已经理解并正确回答了您的问题!如果您仍然卡住，请告诉我:)