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

Html – One line with a button and img overlapping

I’m trying to make a button that fills the whole width and has an icon on the right side. We’re using a shared library for buttons that doesn’t allow icons within the element, so I have to use some negative margin hacky solution to get it to work as intended.

The problem I’m running into is that I can’t get a width: 100% button to sit on the same line as an icon image.

.foo {
  background: yellow;
}

.one {
  background: pink;
  width: 100%;
  display: inline;
}

.two {
  display: inline;
  height: 20px;
  margin-left: -20px;
  background-color: green;
}
<div class="foo">
  <button class="one">
    This is a really cool button
  </button>
  <img class="two" src="https://cdn-icons-png.flaticon.com/512/5650/5650380.png">
</div>

Is there some way to keep the two aligned while giving the button 100% of the width?

Tags:

2

Answers


  1. 0

    something like that ?

    .foo {
  background : yellow;
}

button {
  background : pink;
  width      : 100%;
  display    : inline;
  padding    : .3em;
}

button img {
  display          : inline;
  height           : 1.6em;
  float            : right;
  background-color : green;
}
    <div class="foo">
  <button>
    This is a really cool button
    <img src="https://cdn-icons-png.flaticon.com/512/5650/5650380.png">
  </button>
</div>
    Login or Signup to reply.
  2. 0

    It is possible that way with some coordination trys.

    css:

    <style>
.foo {
  background: white;
}

.one {
  background: pink;
  width: 100%;
  display: inline;
  height: 25px;
}

.two {
    float: right;
    position: relative;
    top: -22px;
    left: -5px;
    height: 20px;
    display: block;
}

</style>

    html:

    <body>

    <div class="foo">
        
        <button class="one">
            This is a really cool one button.
        </button>

        <div>
            <img class="two" src="https://cdn-icons-png.flaticon.com/512/5650/5650380.png">
        </div>

      </div>
    
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search