How to implement block style for list


Tags: jquery,css,html-lists,haml

Problem :

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

enter image description here

//How I want it to look like

enter image description here

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



Solution :

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

    CSS Howto..

    If I have 3 elements, how do I only allow one to be highlighted when clicked at any one time? - CSS, jQuery

    How to build the whole web site from css design [closed]

    How to set div height to 100% of chosen print paper?

    How to implement this logic in CSS?

    How can I make my web application look correct in IE 8 and 9? [closed]

    How to apply a CSS style to div AND the div nested in the div [duplicate]

    I have the CSS & JS, how do I convert that to erb for my Rails app?

    My pure CSS dropdown isn't working, anybody knows how to fix it? [duplicate]

    How to select a group of elements after every nth-element in CSS?

    CSS: how to make two sections at the same line?

    How to return a javascript set style property to CSS default

    How can I get these images to stop 'flickering' when they switch?

    CSS - How to remove 2nd vertical scroll bar without changing anything else?

    How to do :hover on circle navigation from angle x to y

    how to insert css into html for blogger gadget

    How can i make these tabs Responsive

    How to auto adjust (stretch) div height and width using jQuery or CSS

    How to have a background image wider than the content area of a website (without scrollbars)

    How to keep grid width if colums are switched in column menu

    How to set CSS on body tag to rotate a page using JavaScript

    How to create a
      with a triangle for the :active row?

    How to add an image to a CSS popup box

    how can I access a css class from the appended html div?

    how to 'split' a css attribute/value using Jquery

    How to make background of table cell transparent

    How to set out css properly?

    how to turn off the break word in css? [duplicate]

    How to reduce the height of a button with CSS?

    How to make a word bold in a text mentioned in bootstrap tooltip CSS/Jquery

    How to style for only non-touch devices in css?