CODEWITHSUNDEEP
htmlcssformsbutton
Ron LaPlante
Ron LaPlante

Reputation: 3

Having issues placing html buttons side by side in a form

this is my first question here.

I'm having an issue getting my html form buttons side by side.. can somebody take a look and tell me whats wrong? it'd seem like they should by default be placed inline, but I guess that isnt the case.

Here is my html code.

        <input type="submit" name="1" formtarget="" value="1">
        <input type="submit" name="2" formtarget="" value="2">
        <input type="submit" name="3" formtarget="" value="3">
        <input type="submit" name="4" formtarget="" value="4">

and here is the CSS for the form input and individual name

#form input {
position: relative;
display: inline;
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 4px;
border-radius: 4px;
text-shadow: none;
line-height: 44px;
-webkit-appearance: none;
}

and this is the same for each button besides the color changes. 

#form input[name="1"] {
margin-top: 8px;
height: 44px;
width: 50%;
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
#form input[name="2"] {
margin-top: 8px;
height: 44px;
width: 50%;
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}

Can someone help me set this up so that they are inline, side by side?

EDIT: This is what it shows.

http://jsfiddle.net/g01juc2z/2/

Upvotes: 0

Views: 577

Answers (2)

priya786
priya786

Reputation: 1834

in your css make these change where you write

[name="1"]

replace it with 

[type="submit"]

and do not repeat it like a name and another change is 

width:24%;

Upvotes: 0

jmore009
jmore009

Reputation: 12923

you have 4 elements set to width:50% which equals 200% width. Change them to width: 24% (inline-block elements have a natural spacing of 1 or 2px) or less and they will be aligned:

#form input[name="1"] {
  margin-top: 8px;
  height: 44px;
  width: 24%; <---------------
  background: #A901DB;
  border-bottom: 1px solid #B404AE;
  color: #FFF;
  font-size: 18px;
  text-align: center;
}

FIDDLE

Upvotes: 1

Related Questions