Question

试图找出:: before和:: after元素我以绝对ul的形式得到了一个下拉导航。它有一个固定的宽度，我需要一个填充的背景围绕它导航全屏，但subnav正在父李。然而，背景出现在顶部和底部。不在它的两侧。

这是html

<li class="parentli">
  <a href="whatevs">Link</a>
  <ul class="subnav">
    <li class="blankli><div class="supnavimg"></div></li>
    <li class="navitem"></li>
  </ul>
</li>

和css

ul.subnav {position:absolute;top:15px;}
ul.subnav::before {
  background-color: green;
  padding: 0 100%;
  content: " ";
}
ul.subnav::after {
  background-color: green;
  padding: 0 100%;
  content: " ";
 }
.blankli {position:relative;}
.supnavimg {
  position:absolute;
  width:40%;
  right:-100%;
}

Answer 1

已修订：以下内容使用宽度，高度和边距定位项目。可能有更简洁的方法，但这应该让你开始。

ul.subnav 
{
    position: absolute;
    display: block;
    z-index: 800;
    width: 320px;
    height: 40px;
    line-height: 20px;
    margin-top: 0px; /* position entire element vertically */
    margin-left: 60px; /* position entire element horizontally */
    padding: 0;
    background-color: rgba(0, 88, 72, .9);
    color: rgba(255, 255, 255, 1.0);
}

ul.subnav::before 
{
    position: absolute;
    display: block;
    margin-top: 0px;
    margin-left: -40px; /* (padding * -1) of main element */
    content: "";
    width: 40px;
    height: 40px;
    background-color: rgba(255, 0, 0, 1.0);
}

ul.subnav::after 
{
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    margin-top: -40px; /* position ::after item vertically */
    margin-left: 320px; /* position ::after item horizontally */
    content: " ";
    background-color: rgba(0, 255, 0, 1.0);
}

对于绝对ul，水平::之前和::之后

1 个答案: