我有一个包含跨度元素的动态菜单。在我的脚本中,我可以更新这个菜单,因此这个菜单可以包含更多/更少的这些 span 元素。这些 span 元素包含页面标题,也具有可变长度的字符。所有这些跨度都是水平对齐的。
我想要做的是将所有这些跨度居中(这很容易)但我需要一个跨度始终位于可变数量的跨度中间。这个跨度将用作一个空的垫片。
为什么?嗯,这是我正在做的设计。此菜单的中间与图像重叠,因此与跨度重叠。使用“始终居中的跨度”,我正在尝试在菜单中创建一个间隔,因此所有跨度都不会出现在此图像后面。
到目前为止的html:
<div class = 'header'>
<div class = 'header_image'>
<img src = 'centerd_image.jpg' />
</div>
<div class = 'header_menu'>
<span>the empty spacer</span>
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<span>menu4</span>
</div>
</div>
到目前为止的CSS:
.header{
background-color: #90a9c4;
border-bottom: solid #728eac 25px;
position: fixed;
width: 100%;
z-index: 1;
height: 46px;
}
.header_image{
width: 123px;
height: 89px;
position: absolute;
left: 50%;
margin-left: -61px;
z-index: 3;
}
.header_menu {
position: relative;
z-index: 2;
text-align: center;
margin-top: 50px;
}
我怎样才能得到
<span>the empty spacer</span>
始终处于这 4 个(或更多!)
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<span>menu4</span>