css - 将文本放置在彼此下方并拉伸(stretch)

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;

  }

问题是:

我试图让每个元素都有自己的行(在图像上你可以看到转发和喜欢在同一行)，而它们应该在单独的行中。此外，正如您通过查看转推和点赞背景可以看到的那样，它不会延伸到红色边框，因为文本不够长。我如何使背景拉伸(stretch)到边框宽度？这是本节使用的更多代码；

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

}

背景不拉伸(stretch)的另一个例子:

Answer 1

您可以将display:block 添加到l。

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