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 align bootstrap nav menu with another div?

    How to style an anchor tag to look like a button with the same height as the button?

    How to combine HTML, CSS, and Javascript into an HTML code

    How to fit 25 divs inside one div when I have more than 25 child divs?

    On click show or hide the children links in javascript or jquery

    how to get both icon and heading in same line in css

    How to find the css class of an anchor link inside a cross domain iFrame?

    How do horizontally align text next to an image with CSS

    Showing refresh button when animation is complete?

    How can we prevent that when I resize my window, my images move using HTML-CSS?

    jquery easyui TreeGrid: How to make only Column Headers Bold

    How to change Kendo Excel Button Content Text

    How to fix the Height for this area?

    How can I center Twitter-Bootstrap 3 navbar buttons?

    How to make the css affect the new content loaded by jquery?

    How to get this image border effect with CSS [closed]

    How to implement the button css like Spotify play button in the table row

    How to keep all the parent except the first LI highlighted when the sub LI is hovered over

    What is the correct css for the list of results to show correctly in this situation? [closed]

    How do I calculate percentage based on pixels for CSS conversion?

    jquery .show() from only the selected div

    How to CSS Display:table grow right

    how to get 2 div's text to align along the bottom?

    How to select with css specific id only if have specific class on same div?

    How can I force Internet Explorer to apply CSS styles

    How to use SVG Sprite Sheet as CSS background-image while maintaining aspect ratio and scalability

    How to align right-to-left the elements of css menu

    How to target CSS module classes after they are hashed?

    How to modify the link text(html link) properties using css

    CSS dropdown menu not showing the full texts of submenu items