将文本放在彼此之下并伸展

Question

这是我的CSS代码;

#nav a {
  display:block;
  background: #1a1a1a; 
  color: #fff; 
  text-decoration: none;
  padding: 20px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  text-shadow: 0 -1px 0 #000;
  width: 100%;
  height: 100%;
  position: static;
  float:left;

  }

问题在于：

我正在尝试让每个项目拥有它自己的行（在图像上你可以看到重新推文和喜欢在同一行），当它们应该在一个单独的行上时。此外，正如您可以通过查看重新推文和喜欢背景看到的那样，它不会延伸到红色边框，因为文本不够长。如何将背景拉伸到边框宽度？以下是本节使用的更多代码;

  /* submenu positioning*/
  #nav ul {
  position: absolute;
  z-index: 1;
  left: -99999em;
  width: auto;
  height: auto;
  border: 1px solid #A81E1E;

}

背景不拉伸的另一个例子：

Answer 1

您可以将dsiplay:block添加到li。

#nav li {
    position: relative;
    margin: auto !important;
    display: block;
}