Search code examples
htmlcssstylesheet

How to edit CSS so button appears on same line as input field?


This is an issue inside a shopping cart, so unfortunately it's a multi-step process to view it:

  1. https://blendbee.com/shop/black-tea-blends/happy-times/
  2. Click one of the 3 "Add to cart" buttons
  3. Click "View Cart"
  4. Notice that the "Apply Gift card" button appears on a lower line. I'd like it to be to the right of the "Gift Cart" input field.

enter image description here

Thanks in advance guys! You rock.


Solution

  • HTML:

        <div id="entry">
            <form>
                <input id="input" placeholder="Coupon Code"></input>
                <button id="submit" type="submit">Apply Coupon</button>
            </form>
        </div>
    

    CSS:

    input {
        display: inline;
        width: 70%;
    }
    button {
        display: inline;
        width: 20%;
    }
    

    The width makes it so that they two will never "overflow" the width of the containing div.