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

  • 本文关键字:UL 位置 协调 html css position
  • 更新时间 :
  • 英文 :


我是编码领域的新手,并且意识到可能有一个非常简单的解决方案来解决我的问题。我已经通过对DIV#容器中的每个切片使用绝对定位将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~原始

我意识到,当绝对定位在发挥作用时,你应该无法浮动一个元素。但是,当我从.nav,ul中删除绝对位置、尝试相对位置g等时,ull水平流动,而不是垂直流动!

必须有一个简单的解决方案;我准备把头发扯掉,如果有任何帮助,我将不胜感激。请尽可能简单地回答!

display:内联块;如果您不能使用浮动,也可以执行此操作。如果你把浮子放在li上,它不起作用吗?

nav li {
  display: inline-block;
}

以下是一个示例:http://codepen.io/anon/pen/xboPxB

另外几件需要注意的事情(尽管我完全理解使用Dreamweaver的要求,并且由于课程的原因以奇怪的方式做事),位置:绝对;可能是危险的和破坏布局,我相信你正在发现;不过我不会讨论这个问题,除非你有任何问题,因为你提到这是由于你的教练。

线条高度应该是无单位的——可以把它想象成线条高度*字体大小。如果你的字体大小是20px(或1em),并且行高需要是40px(或2em),那么行高是2。

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

最新更新