How to implement block style for list

Question

I have the following HAML code

//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

How can I update my css such that the list is in the "block style" as seen in the last image?

Answer 1

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

Answer 2

I think you need like this

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

Answer 3

try this:

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