Trying to use CSS to display elements in a row pattern next to each other

user_13009779 0
Viewed 62

I am trying to create a movie app and I am getting stuck with styling some elements. I am new to CSS and styling. Here is my code. I am trying to display these element one after the other. Here is my code

 <ul class="actions">
    <li><div class="vote_average">85</div></li>
    <li><div class="favorites-heart"><i class="far fa-heart"></i></div></li>
    <li><div class="list"><i class="fas fa-list"></i></div></li>
 </ul>

.vote_average, .favorites-heart, .list {
    font-weight: 300;

    font-size: 18px;
    /* font-weight: 700; */
    line-height: 50px;
    position: absolute;
    width: 50px;
    text-align: center;
}


.favorites-heart::after, 
.list::after, 
.vote_average::after {
    border-radius: 100%;
    border: 2px solid #C4AF3D;
    /* #ee927b */
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.actions {
    list-style-type: none;
    padding-left: 0px;
    display: flex;
    align-items: center;
}

.actions li {
    /* display: inline-flex; */
    flex-direction: column;
    padding-right: 40px;
    
}

here is what it currently looks like

Here is an example of what i want it to look like

Basically I am trying to get each element to display next to each other is a row pattern. I would like to have a background that contrasts the icon glyphs.

flexbox css html
2 Answers

Flex-box to the rescue.

ul {
  list-style: none;
  margin: 0;
  padding: 0; /* get rid of the defaults */
}

.actions {
  display: flex; /* use flex! */
  flex-direction: row;
  align-items: center;
  border: 1px solid red; /* just to see */
}

li {
  border: 1px solid blue; /* just to see */
  padding: 10px;
}
 <ul class="actions">
    <li>one</li>
    <li>two</li>
    <li>three</li>
 </ul>

(you could also make them 'inline-block' and use 'vertical-align: middle', but 'inline-block' elements have some quirks and there are uncontrollable spaces between those items / and I suggest you stick with flex-box! : )

more notes: https://jsfiddle.net/sheriffderek/npdL3vbr/ - on keeping the components separate from the layout

user_13994560

Here is a code which corresponds a little more to the example that you gave us in image.

* {
  box-sizing: border-box;
  }

ul {
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  width: max-content;
  list-style: none;
  heigth: 50px;
}

li {
  display: flex;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  margin: 10px;
  min-width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #C4AF3D;
}

.vote_average {
  background: #081C22;
  font-weight: bold;
}
<ul class="actions">
    <li class="vote_average"><div >85</div></li>
    <li><div class="favorites-heart"><i class="far fa-heart"></i></div></li>
    <li><div class="list"><i class="fas fa-list"></i></div></li>
 </ul>

If you have any questions regarding this code, don't hesitate!

user_136857720
Related