Question 45291 in Html Question posted in
Some basic documentation can be found here.

How can I align my two like and dislike buttons on the same line? – Html

It seems very easy to do but I don’t find a good solution. I want to have my two like and dislike buttons (that have almost the same properties) on the same line instead of having them on two different lines.
The thing is that there is also an animation that makes their size bigger when the user puts his cursor over them which seems to create some problems with the code I wrote.

Here is the example

div.post{
    background-color: #DBDBDB;
}

div.post{
    background-color: #DBDBDB;
}

/* dislike button */

.dislike{
    width: 35px;
    height: 35px;
    border-radius: 50px;
    background-color: #DB4349;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    overflow: hidden;
    text-decoration: none;
}

.dislike:hover{
    width: 100px;
    transition: 0.5s;
}

.dislikeIcon{
    background-size: contain;
    padding-top: 3px;
    width: 20px;
    height: 20px;
}

.dislikeText{
    display: none;
    margin-left: 10px;
    text-decoration: none;
    font-family: amble-bold, sans-serif;
    color: white;
    text-transform: uppercase;
}
.dislike:hover > #dislikeText{
    display: flex;
    transition: 0.5s;
    transition-delay: 1s;
}

/* like button */

.like{
    width: 35px;
    height: 35px;
    border-radius: 50px;
    background-color: #34aacf;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    overflow: hidden;
    text-decoration: none;
}

.like:hover{
    width: 100px;
    transition: 0.5s;
}

.likeIcon{
    background-size: contain;
    padding-top: 3px;
    width: 20px;
    height: 20px;
}

.likeText{
    display: none;
    margin-left: 10px;
    text-decoration: none;
    font-family: amble-bold, sans-serif;
    color: white;
  text-transform: uppercase;
}
.like:hover > #likeText{
    display: flex;
    transition: 0.5s;
    transition-delay: 1s;
}
<!DOCTYPE html>
<html>
<body>
  <div class="post">
                <img>
                <p>
                    username
                </p>
                <p>
                    this is a placeholder text
                </p>
                <a class="dislike" href="#disliked">
                    <img src="dislikeIcon.png" class="dislikeIcon" draggable="false">
                    <p class="dislikeText" id="dislikeText">dislike</p>
                </a>

                <a class="like" href="#liked">
                    <img src="likeIcon.png" class="likeIcon" draggable="false">
                    <p class="likeText" id="likeText">like</p>
                </a>
            </div>
</body>
</html>
Tags:

2

Answers


  1. 0

    Just change your like and dislike button classes from display: flex to display: inline-flex; as below.

    More on inline vs block elements from Samantha Haming and a nice video explaining the same from Kevin Powell

    div.post {
  background-color: #DBDBDB;
}

div.post {
  background-color: #DBDBDB;
}


/* dislike button */

.dislike {
  width: 35px;
  height: 35px;
  border-radius: 50px;
  background-color: #DB4349;
  display: inline-flex; /*changed this from display: flex */
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  overflow: hidden;
  text-decoration: none;
}

.dislike:hover {
  width: 100px;
  transition: 0.5s;
}

.dislikeIcon {
  background-size: contain;
  padding-top: 3px;
  width: 20px;
  height: 20px;
}

.dislikeText {
  display: none;
  margin-left: 10px;
  text-decoration: none;
  font-family: amble-bold, sans-serif;
  color: white;
  text-transform: uppercase;
}

.dislike:hover>#dislikeText {
  display: flex;
  transition: 0.5s;
  transition-delay: 1s;
}


/* like button */

.like {
  width: 35px;
  height: 35px;
  border-radius: 50px;
  background-color: #34aacf;
  display: inline-flex; /*changed this from display: flex */
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  overflow: hidden;
  text-decoration: none;
}

.like:hover {
  width: 100px;
  transition: 0.5s;
}

.likeIcon {
  background-size: contain;
  padding-top: 3px;
  width: 20px;
  height: 20px;
}

.likeText {
  display: none;
  margin-left: 10px;
  text-decoration: none;
  font-family: amble-bold, sans-serif;
  color: white;
  text-transform: uppercase;
}

.like:hover>#likeText {
  display: flex;
  transition: 0.5s;
  transition-delay: 1s;
}
    <div class="post">
  <img>
  <p>
    username
  </p>
  <p>
    this is a placeholder text
  </p>
  <a class="dislike" href="#disliked">
    <img src="dislikeIcon.png" class="dislikeIcon" draggable="false">
    <p class="dislikeText" id="dislikeText">dislike</p>
  </a>

  <a class="like" href="#liked">
    <img src="likeIcon.png" class="likeIcon" draggable="false">
    <p class="likeText" id="likeText">like</p>
  </a>
</div>
    Login or Signup to reply.
  2. 0

    Wrap buttons with div with flexbox. And this solution give you easy way to make gap between buttons

     <div class="buttons">
     <a class="dislike" href="#disliked">
         <img src="dislikeIcon.png" class="dislikeIcon" draggable="false">
         <p class="dislikeText" id="dislikeText">dislike</p>
    </a>

       <a class="like" href="#liked">
       <img src="likeIcon.png" class="likeIcon" draggable="false">
       <p class="likeText" id="likeText">like</p>
    </a>
</div>

    .buttons {
  display: flex; 
  gap: 10px
}

    https://codepen.io/rachkovartem/pen/gOdppdM

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search