Hr stopping my elements from moving up (html)-CodePudding

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" >
     <span >
         <ion-icon name="add-circle-outline"></ion-icon>
     </span>
     <span >ADD</span>
 </button>
 <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

</body>
</html>

Can somebody explain to me how can I resolve this?

CodePudding user response：

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/[email protected]/dist/ionicons.js"></script>
</head>

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

Click full-page

CodePudding user response：

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 >
  <h1 style="font-family:Arial, Helvetica, sans-serif">Product list</h1>
  <hr>
  <button type="button" >
    <span >
      <ion-icon name="add-circle-outline"></ion-icon>
    </span>
    <span >ADD</span>
  </button>
</div>

CodePudding user response：

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 >button</button>