如何实现列表的块样式

Question

我有以下HAML代码

//haml code for template
.activities_section
  %ul.row_one
    %li
      %a{href: "#"} lol
    %li
      %a{href: "#"} watched a movie
    %li
      %a{href: "#"} read a book
    %li
      %a{href: "#"} happy
    %li
      %a{href: "#"} sad

//CSS for section
.activities_section {
  width: 220px;
  height: 176px;
  border-left:$base_border;
  border-right:$base_border;
  border-bottom:$base_border;
  border-top:$base_border;
  background: $light_background_color;
  ul {
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;
    li {
      padding: 5px;
      font-size: 0.8em;
      // text-align: center;
    }
  }
}


//How it looks like currently

//How I want it to look like

如何更新我的css，使列表处于最后一张图片中的“块样式”？

Answer 1

li {
      padding: 5px;
      font-size: 0.8em;
      text-align: center;
      border-radius: 6px;
      background: #ccc;
      display: inline-block;
}

Answer 2

我认为你需要这样

http://jsfiddle.net/miqdad/uwLK7/

Answer 3

试试这个：

ul li {
  padding: 3px 4px;
  font-size: 0.8em;
  text-align: center;
  border-radius: 8px;
  display: inline-block;
  color: blue;
  background-color: #ededed;
}