Question

我正在使用自己的设计创建一个网站，最近我有一个复杂的问题。这是关于菜单样式的定位方式。我发现这个问题很难解释，所以首先，我会展示图像。
它应该看起来像： http://i.imgur.com/XINIlXC.jpg
看起来像： http://i.imgur.com/RKrFZVz.jpg
正如您所看到的，这是一个简单的水平菜单，菜单项之间有分隔符，但棘手的部分是角落。在一切运行完美的图像中，我使用了一个混乱的代码，这与列表不兼容，后面我将需要下拉菜单。
所以，这是一个混乱的代码：

<div class="menu" id="menu-item">

<img src="images/top_menu_edge.png" style="margin-left:-23px;"/> <span style="margin-right:10px"> 1aaaa <span class="ms"></span> 2bbbb <span class="ms"></span> 3 </span>

</div>

span.ms只是菜单分隔符。至于所有其他部分，我将展示一个css代码。

#menu-item
{
position: absolute; /* The absolute position shouldn't be a problem, because everything is contained in div#header, and it's position is relative. */
bottom: 12px;
right: 0;
height: 34px;
background-position: bottom right;
z-index: 5;
color: #192c51;

}
.menu
{
position: absolute;
bottom: 0;
right: 0;
height: 34px;
background-image: url('images/top_menu_bg.png');
background-position: bottom right;
z-index: 5;
color: #192c51;

}
这是修正后的代码，但由于某种原因，图像不起作用：

<div class="menu" id="menu-item">

<div class="menu-item">

<img src="images/top_menu_edge.png" style="margin-left:-23px;"/>

<ul id="nav">

<li>  Pagrindinis </li>
<li> Apie mus </li>
<li> Paslaugos </li>
<li> Kontaktai </li>
</ul>
</div>
</div>

ul和li的额外css行：

#nav
{
list-style:none;
float:left;
}
#nav > li {
float: left;
}
#nav li+li
{
background:url('images/top_menu_sep.png') no-repeat top left;
padding-left:10px;
}

这就是它，我真的不明白为什么标签会毁掉它，但我需要它来做它。有没有人有任何反对，如何解决它，或者可以告诉我的方式？我真的很感激。
干杯：）

Answer 1

如果你给元素浮动，如果你把一个非浮动元素放在它上面，它们将没有宽度。删除所有浮动并切换到显示：inline-block或让所有浮动

在网站上需要CSS帮助

1 个答案: