Question

我需要提供一个包含3个元素的标题菜单：

一个是左对齐的
一个居中
一个是右对齐的

我想要这个菜单的灰色背景。

问题：如果我的左侧或右侧元素中有链接，并且由于居中元素而无法点击。

如何预防这个问题？或其他方式有这种菜单？

非常感谢任何想法。

<div class="headerContainer">
    <div class="headerLeft">
        <a href="#">Left</a>
    </div>
    <div class="headerTitle">Middle</div>
    <div class="headerRight">
        <a href="#">Right</a>
    </div>
</div>

.headerContainer {
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 5px;
    max-width: 100%;
    height: 30px;
    background-color: #fcfcfc;
    border-bottom: 1px solid #f6f6f6;
}
.headerTitle {
    position: absolute;
  /*  z-index: -1;  */
    top: 10px;
    width: 100%;
    margin: auto;
    text-align: center;
    font-size: x-large;
    font-weight: bold;
}
.headerLeft {
    float: left;
}

.headerRight {
    float: right;
}

Answer 1

使左右位置相对并为它们提供更高的z指数。

＆＃13;

.headerContainer {
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 5px;
    max-width: 100%;
    height: 30px;
    background-color: #fcfcfc;
    border-bottom: 1px solid #f6f6f6;
}
.headerTitle {
    position: absolute;
  /*  z-index: -1;  */
    top: 10px;
    width: 100%;
    margin: auto;
    text-align: center;
    font-size: x-large;
    font-weight: bold;
}
.headerLeft,
.headerRight {
    position: relative;
    z-index: 2;
}
.headerLeft {
    float: left;
}

.headerRight {
    float: right;
}

＆＃13;

<div class="headerContainer">
    <div class="headerLeft">
        <a href="#">Left</a>
    </div>
    <div class="headerTitle">Middle</div>
    <div class="headerRight">
        <a href="#">Right</a>
    </div>
</div>

＆＃13;

Answer 2

更新了小提琴：http://jsfiddle.net/7mo7hyza/

您的z-index想法很好，但您的效果不佳：z-index仅适用于不在文档正常工作流程中的元素（position: absolute/relative/..} ）

因此，您只需使用position: absolute而不是float来定位左/右容器，并制作大容器relative，以便您可以将其他容器相对于那个容器定位

.headerContainer {
    position: relative;
} .headerTitle {
    z-index: 0;
} .headerLeft {
    position: absolute;
    left: 0;
    z-index: 1;
} .headerRight {
    position: absolute;
    right: 0;
    z-index: 1;
}

Answer 3

尽量避免使用float元素或搞乱z-index。对于您要实现的目标，有两种更合适的方法：

方法1：CSS框模型

.headerContainer {
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 5px;
    max-width: 100%;
    height: 30px;
    background-color: #fcfcfc;
    border-bottom: 1px solid #f6f6f6;
    display: flex;
    flex-wrap: nowrap;
}
.headerLeft,
.headerTitle,
.headerRight {
    display: inline-block;
}
.headerLeft,a
.headerRight {
    flex-grow: 0;
}
.headerTitle {
    flex-grow: 1;
    text-align: center;
    font-size: x-large;
    font-weight: bold;
}

<div class="headerContainer">
    <div class="headerLeft">
        <a href="#">Left</a>
    </div>
    <div class="headerTitle">Middle</div>
    <div class="headerRight">
        <a href="#">Right</a>
    </div>
</div>

请参阅JsFiddle

方法2：表格布局

.row {
    display: table-row;
    width: 100%;
    background-color: #eee;
}
.cell {
    display: table-cell;
}
.middle {
    width: 100%;
    text-align: center;
}

<div class="headerContainer row">
  <div class="cell">
    <a href="#">Left</a>
  </div>
  <div class="cell middle">
    <h1>Middle</h1>
  </div>
  <div class="cell">
    <a href="#">Right</a>
  </div>
</div>

请参阅JsFiddle

我的链接不再可点击，因为它落后于其他元素

3 个答案: