如何貫徹名單

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

試試這個：

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

Answer 3

我認爲你需要這樣的

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