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..

    css resize: How to resize a dynamic growing div after max height is active

    Meeting Calendar | How to take care of the overlapping meetings to show in the calendar?

    How to make the content div scrollable without using javascript

    How to create a simple article design with CSS and HTML5

    How to place the block on the top of “second” screen using CSS?

    How to design aggregations filter in css for week, month?

    How to apply row virtualization for a table / list in HTML/CSS/JS? [closed]

    How to create a slanting border with css

    How do I center (vertically and horizontally) buttons in a div tag?

    How to set css styles with variables in rails if certain item is selected?

    How do I implement this basic CSS for just one category?

    How to.. the middle div of three ever on center and if the navigator are resized

    CSS div element - how to show horizontal scroll bars only?

    How to load jQuery before CSS code?

    How to scale an entire webpage down to ipad or phone size

    CSS - How to resize texboxes with background image when browser is resized?

    What are some Best CSS Practices, Do you Re-use previous CSS? How about Frameworks? [closed]

    How to change dropdown submenu second level background?​

    How to Align all inputs in a Form

    how to adjust CSS image on mobile device while maintaining the aspect ratio

    how to make
  • add css class active after refreshing page?
  • How To Display only First Word of H2 Heading With JavaScript or CSS

    How to fade out text on top of semi-transparent div using CSS?

    how to center text html css

    How to avoid name collisions of css class names

    How to change the position of Dynamic View's Search bar to the left (CSS CODE)

    How can I make my web application look correct in IE 8 and 9? [closed]

    Using pure Javascript to show contents of list on click only on mobile and show initially on desktop

    How to get the same height on two Bootstrap columns? [duplicate]

    How to have two elements with scrollbars next to each other?