0

我有一个包含跨度元素的动态菜单。在我的脚本中，我可以更新这个菜单，因此这个菜单可以包含更多/更少的这些 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>
4

0 回答 0