Question

我试图在标题栏上放置菜单项，但设计要求是通过放置一个大的顶部边框来突出当前菜单项。

但问题是，菜单项正在增长，就像默认一样。如果我将菜单项设为position:absolute，那么它们都会崩溃。

对此有何解决方案？ THX！

这里是jsfiddle： http://jsfiddle.net/yc7ymmp4/1/

这是HTML：

<div class="main">
    <div class="bottomBar">
    <ul>
      <li class="current"><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
    </ul>
  </div>
</div>

这里是CSS：

.main{
    width:100%;
    height:479px; 
    background:#EEE; 
    position:relative;
}
.bottomBar{
    height:105px; 
    position:absolute;
    bottom:0;
}
ul{ 
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
}
li{
    float:left;
    width:auto;
    border:1px solid #000;
    positio1n:absolute;
    display:inline-block;
}
li a{ 
    color:#000;
    padding:43px 43px;
    display:block;
}
li a:hover{ 
    background:#00a94e;
}
.current{
    border-top:10px solid #000;
}

Answer 1

你可以这样做：

.current{
    border-top:10px solid #000;
    margin-top:-9px;
}

顶部＆＃34;偏移的负余量＆＃34;边框厚度（1像素的差异是正确排列的东西）。对于固定数量的偏移量，此方法非常有效。

Answer 2

您可以使用box-shadow属性。

.current{
  box-shadow: 0 -10px 0 #000;
}

＆＃13;

.main{
  width:800px;
  height:160px; 
  background:#EEE; 
  position:relative;
}
.bottomBar{
  height:105px; 
  position:absolute;
  bottom:0;
}
ul{ 
  list-style:none;
  padding:0;
  margin:0;
  position:relative;
}
li{
  float:left;
  width:auto;
  border:1px solid #000;
  display:inline-block;
}
li a{ 
  color:#000;
  padding:43px 43px;
  display:block;
}
li a:hover{ 
  background:#00a94e;
}
.current{
  box-shadow: 0 -10px 0 #000;
}

＆＃13;

<div class="main">
  <div class="bottomBar">
    <ul>
      <li class="current"><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
    </ul>
  </div>
</div>

＆＃13;

如何使li项目从底部生长（类似于定位的绝对底部）

2 个答案: