Hr stopping my elements from moving up (html)

Question

I try to put some buttons over a horizontal rule in HTML. I tried with left, up (to put in the up-right corner but hr is stopping my button from moving up). Here is my code in HTML:

<!DOCTYPE html>
<html>
<head>
  <style>
     .button{
         display:inline-flex;
         height: 25px;
         padding: 0;
         background-color: rgb(190, 190, 190);
         border: none;
         outline: none;
         border-radius: 5px;
         overflow: hidden;
         font-family: 'Quicksand' , sans-serif;
         font-size: 15px;
         font-weight: 400;
         cursor:pointer;
         text-align:center;
         position: relative;
         left:600px; up:20px;
     }
 
     .button:hover {
          background: rgb(134, 134, 134);
     }
     
     .button:active {
          background: rgb(158, 157, 157);
     }
     
     .button__text,
     .button__icon{
          display: inline-flex;
          align-items: center;
          padding: 0 3px;
          color: whitesmoke;
          height: 100%;
     }
  </style>
</head>

 <body style="background-color: white;">
 <h1 style="font-family:Arial, Helvetica, sans-serif">Product list</h1>
 <hr>

 <button type="button" class="button">
     <span class="button__icon">
         <ion-icon name="add-circle-outline"></ion-icon>
     </span>
     <span class="button__text">ADD</span>
 </button>
 <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>

</body>
</html>

Can somebody explain to me how can I resolve this?

HR and H1 are block elements, the styling you added to the button effects the inside of the button. Please add your code as a snippet in order for us to edit your code easily and come with a real answer. — Dennis van de Hoef - Xiotin, Dec 19 '21 at 16:03
ok, I am new on this platform and I really didn't know that you can edit my code. I will edit now the question :) — Nicolaica-Dan Stefan, Dec 19 '21 at 16:09

score 0 · Answer 1 · edited Dec 19 '21 at 22:38

Following what you draw in the third image

This code can help you

you write that <hr> block to go up, but no, you write wrong css (up)

in the first image you use up but you need to write top)

Please note "top" does not take you up, but down

Use this for exercise to learn: https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/change-an-elements-relative-position

.btn {
position: absolute;
top: 0;
right: 0;
}

<div>random text</div>
<hr>
<button class="btn">button</button>

score 0 · Answer 2 · answered Dec 19 '21 at 16:55

You can write something like this if you can change html

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.button {
  display: inline-flex;
  height: 25px;
  padding: 0;
  background-color: rgb(190, 190, 190);
  border: none;
  outline: none;
  border-radius: 5px;
  overflow: hidden;
  font-family: 'Quicksand', sans-serif;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  text-align: center;
  position: relative;
  right: 0;
  top: 20px;
}

.button:hover {
  background: rgb(134, 134, 134);
}

.button:active {
  background: rgb(158, 157, 157);
}

.button__text,
.button__icon {
  display: inline-flex;
  align-items: center;
  padding: 0 3px;
  color: whitesmoke;
  height: 100%;
}

.wrapper h1 {
  order: 1;
}

.wrapper .button {
  order: 2;
}

.wrapper hr {
  width: 100%;
  order: 3;
}

<div class="wrapper">
  <h1 style="font-family:Arial, Helvetica, sans-serif">Product list</h1>
  <hr>
  <button type="button" class="button">
    <span class="button__icon">
      <ion-icon name="add-circle-outline"></ion-icon>
    </span>
    <span class="button__text">ADD</span>
  </button>
</div>

Kameron · Accepted Answer · 2021-12-19T17:07:49.710

So because you're using an inline display property for your button, it would make sense to add the HTML for the button span before the <hr>. See the additions I made. Also, h1's have a default margin associated with them (see here). So you will have to put margin: 0; on your h1 to get rid of some of that unnecessary spacing.

h1 {
  margin: 0;
}

     .button{
         display:inline-flex;
         height: 25px;
         padding: 0;
         background-color: rgb(190, 190, 190);
         border: none;
         outline: none;
         border-radius: 5px;
         overflow: hidden;
         font-family: 'Quicksand' , sans-serif;
         font-size: 15px;
         font-weight: 400;
         cursor:pointer;
         text-align:center;
         position: relative;
         left:600px; 
         top:20px;
     }
 
     .button:hover {
          background: rgb(134, 134, 134);
     }
     
     .button:active {
          background: rgb(158, 157, 157);
     }
     
     .button__text,
     .button__icon{
          display: inline-flex;
          align-items: center;
          padding: 0 3px;
          color: whitesmoke;
          height: 100%;
     }

<!DOCTYPE html>
<html>
<head>
 <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
</head>

 <body style="background-color: white;">
 <h1 style="font-family:Arial, Helvetica, sans-serif">Product list</h1>
  <button type="button" class="button">
     <span class="button__icon">
         <ion-icon name="add-circle-outline"></ion-icon>
     </span>
     <span class="button__text">ADD</span>
 </button>
 <hr>
</body>
</html>

Click full-page

Your code Kameron helped me a lot. But the button is on the hr (In the middle) not over the hr as I needed. I changed the top value to 0, and now its over — Nicolaica-Dan Stefan, Dec 19 '21 at 17:04

Hr stopping my elements from moving up (html)

3 Answers3