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


Tags: html,css,stylesheet

Problem :

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.


    CSS Howto..

    How to change the link color of the current page with CSS

    How to make a vertical CSS menu with arrows on the right of each entry?

    How can I prevent a flex container from overflowing/underflowing?

    How to give a property to an element using its title in css [duplicate]

    How to handle text wrapping in CSS? [duplicate]

    text over horizontal line…How do I make the line gradient?

    How to find all possible CSS Styles and Attributes of an Element?

    How to convert bullet points into horizontal list?

    Background image cut off outside of item. How can I make it show?

    How to make sure JQuery dynamically inject CSS properly and ready to use?

    How to prepend a number before an HTML H2 with CSS?

    how to make a div toggle background-position “onclick” while keeping hover

    Selenium how to access two controls of same css class

    How to set the CSS content property with a Google Material Icon?

    How to include SASS into CSS

    How to align a table menu to an Banner

    CSS how to have two divs to the right of one div but not beside each other

    how can I hide an element inside iFrame using Jquery or CSS

    HTML: how to make 2 tables with different CSS [closed]

    how to move css element with scrolling left with Jquery?

    How do I create a region/zone map for the web? [closed]

    How to create desktop widgets [closed]

    How can I make a two column layout's main div auto fit to browser width?

    css - how to get floated divs to stack when you zoom in

    How to remove whitespace that appears after relative positioning an element with CSS

    how to give two different states in css?

    How to place content below a fixed image?

    How to change element properties on hover with CSS in following case

    How can I scale element height and width using CSS?

    WordPress: How to style Title and Excerpt in Display Post Shortcode Plugin