How to implement block style for list
-
13-06-2021 - |
Pergunta
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?
Solução
li {
padding: 5px;
font-size: 0.8em;
text-align: center;
border-radius: 6px;
background: #ccc;
display: inline-block;
}
Outras dicas
I think you need like this
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;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow