CSS: How to put form input fields and button next to each other in the same line?

Tags: html,css

Problem :

I'm trying to achieve the following:

enter image description here

but I cannot get the background right. I've created this fiddle so you see what I've done. http://jsfiddle.net/dya9xh1e/

field { 
  font-family:arial, sans-serif; 
  border-color: #d9d9d9; 
  border-top:solid 1px #c0c0c0; 



Could someone please advise on this?

Solution :


here you have something similar to the pic

input { font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; background-color:#CCC; display: inline;} 

        border: 2px solid #CCC


You have several mistakes, for example in the firstline of your CSS, you need to add a . to reference the class. In my solution was change by the input selector.

Then I added the display:inline-block property to make components inline. But you need to change the container size, in order to fit the total input width, that's why I put 1000px

    CSS Howto..

    Css selector : How to reference a attribute inside a div

    How to apply a css class for jqGrid height property setGridHeight?

    CSS How to place a submit button on a new line?

    How to achieve this layout with CSS?

    How to modify how TinyMCE format text

    How to format an HTML table using CSS for printing?

    How to pin the menu to the upper part of the screen?

    How to mix colors in CSS?

    Shows a dropdown element with jQuery

    How to override CSS

    How to create shadow in JSF input field

    how to change size of the element using css?

    Making breadcrumbs… not as easy as literally making breadcrumbs, how can I get text to be inside?

    How to make navigation bar of pure css slider?

    How to make last element in a series of wrapped inline-block elements fill the available horizontal space?

    CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container

    How to disable [marquee] tag with CSS? Is this possible?

    How to create a rounded corner background box using CSS?

    In IE Compat View, Developer tools shows elements “style” with the class of the previous element

    How to get the element position after css-translation

    how to cope with text to element alignment issues

    Push vertically resizable Div to bottom of wrapper. How?

    how to make a child div visible when clicking its parent div in pure css

    BeautifulSoup4/CSS selector how to select the

    How to increase a CSS value by the value of a JS variable?

    How to align specific element to the right using :last-child pseudo

    Devtools audit shows unwanted/injected css rules

    How to keep div height fixed during changing its content?

    how to make html email look exactly the same as previewed just in browser?

    How to scroll a div inside another div?