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 give readmore for a text?

    How to prevent outer
    CSS from affecting inner
    CSS

    how to change negative sign position css

    how to give two different states in css?

    How to extend a div's width beyond its wrapper?

    How can I place html text on top of a canvas flot chart?

    How can I make responsive image take up 100% of its parent's height?

    how to verify “Cache-Control”, “no-cache, no-store, must-revalidate”

    How can I organize my css rules?

    CSS: How to align differently sized images in a line?

    How to do CSS wild card search? [duplicate]

    show,hide DIV with mouseover , mouseout

    How to randomly pick colors and shapes from a for loop and display it in another div?

    How can I target an id=“last_name[]_field” with css

    How to create a dotted shadowy effect on an image with CSS?

    How do I trigger an onclick CSS on a particular ID

    How to adjust Capybara finders on a site using css-modules?

    How to strach div in some line to “all left space” with css

    How to position boxes like a posterboard with CSS?

    How do I get a jquery function to only affect the child element of 'this'

    How to define margin (CSS) around an absolutely positioned, floating element?

    How to set a relative position/size to the screen for elements in CSS/HTML? [closed]

    How to add external css into html

    How to style jQuery UI's autocomplete list for mouse leave event?

    How to add a scrollbar to an HTML5 table?

    How can I edit adjacent selector to a nested one

    How to center text in my div

    How to fix the top row and first column in a webpage, with only CSS

    How to display a list in horizontal groups of li elements?

    How to align text in CSS