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

时间:2015-04-10 13:29:57

标签: html css position

我对编码很陌生,并意识到我的问题可能有一个非常简单的解决方案。我已经通过对 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

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

必须有一个简单的解决方案;我已准备好撕掉我的头发,任何帮助都会受到赞赏。请尽可能简单地回答!

1 个答案:

答案 0 :(得分:0)

display:inline-block;如果你不能使用花车也会做这个工作。如果你将浮动放在li上,它会不起作用吗?

nav li {
  display: inline-block;
}

这是一个例子: http://codepen.io/anon/pen/xboPxB

另外需要注意的几点(尽管我完全理解使用Dreamweaver的要求,并且由于课程作业以奇怪的方式做事),position:absolute;因为我确定你在发现,所以可能是危险的和布局破坏;虽然我不会进入这个,除非你提出任何问题,这是由于你的导师。

行高应该是无单位的 - 将其视为行高*字体大小。如果您的字体大小为20px(或1em),并且行高需要为40px(或2em),则行高为2。

我希望我能正确理解并回答你的问题!如果你仍然被卡住,请告诉我。)