小编Kat*_*ord的帖子

我正试图在一个倾斜的div上创建一个局部阴影,尽可能接近这个创意.

现在我一直试图用伪元素(特别是之前)做这个,但我发现每当我扭曲它们应用的元素时,这些元素表现得很奇怪.即使z-index设置为-1,伪元素也会一直显示在div的顶部.无论我对z-index做什么,它都将保持在它之上.我希望它在它应用的div后面,并在下面的div前面,就像在广告中一样.

这是我的:: before代码和codepen的链接

CSS

/*! Shadows */
#test-title {
  position: relative;
}

#test-title:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

http://codepen.io/kathryncrawford/pen/WwWEma

我有一个内联块菜单(使用bootstrap 3制作),我想知道是否可以将任何包装的内容对齐？

这是一个突出问题的代码

http://codepen.io/Kathrynwatts/pen/VebjzW

如您所见,当您缩小屏幕尺寸时,所有列表项都对齐到左侧(这是默认的换行行为).如果可以的话,我希望他们能够包裹到中心.

CSS

.plays-nav { //parent container
font-weight: 400;
letter-spacing: 3px;
}

.plays-nav>li { //menu list items
text-align: center;
}

.navbar-centered .navbar-nav { //parent container
    float: none;
    text-align: center;
}
.navbar-centered .navbar-nav > li { //menu list items
    float: none;
}

.navbar-centered .nav > li { //menu list items
    display: inline-block;
            text-align: center;
            margin: 0 auto;
}