Question

我正在尝试创建一个导航，每个列表项上方都有一个图像，而不是每个项目的单个图像。当我全屏时它看起来很好但是当我最小化屏幕时期望列表项很好地堆叠它们堆叠在一起。以下是我的代码列表：

#nav ul, #nav li {
list-style: none;
font-size: 1.2em;
text-transform:uppercase;
}

#nav ul li {
display: inline;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
background: url(images/navico.jpg) no-repeat center;
padding-top: 50px;
padding-right: 4px;
padding-bottom: 0px;
padding-left: 6px;
}

这是指向页面http://ecoairofswfl.com/Bush2/

的链接

Answer 1

试试这个，

#nav ul li {
  background: url("images/navico.jpg") no-repeat scroll center center transparent;
  display: block;
  float: left;
  list-style: none outside none;
  padding: 50px 4px 0 6px;
}

我将它们改为阻挡元素并将它们浮动到左边;内联在堆叠时无法正常工作。

Answer 2

Solution is
#nav ul li {
    display: inline-block;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    background: url(images/navico.jpg) no-repeat center;
    padding-top: 50px;
    padding-right: 4px;
    padding-bottom: 0px;
    padding-left: 6px;
    }

流体div中的CSS导航问题

2 个答案: