CODEWITHSUNDEEP
htmlinputcss-floatinlinefieldset
John Bernal
John Bernal

Reputation: 250

HTML Display Fieldset and Button inline

I have a fieldset with a text input box, with a submit button. I want them to appear in a single row but the fieldset appears in one row, and then the continue appears in the next. Here's my html:

<label><fieldset class="registration_code">
    <legend>Registration Code</legend>
    <input type="text" name="regis_code" id="regis_code"/>
</fieldset>
    <input type="button" class="button2" name="Submit" value="Continue"/>
</label>

I've tried all combinations of making the button or the fieldset inline, inline-block, float:left, float:right. none of them are resulting in what I want. I just want a single row displaying both of these elements. How do I go about doing this?

Upvotes: 1

Views: 9870

Answers (2)

Lowkase
Lowkase

Reputation: 5699

Not sure why you wrapped your code in a label tag:

http://jsfiddle.net/hyxaK/1/

<fieldset class="registration_code">
    <legend>Registration Code</legend>
    <input type="text" name="regis_code" id="regis_code"/>
</fieldset>
<input type="button" class="button2" name="Submit" value="Continue"/>

.registration_code { display:inline-block; }

Upvotes: 2

code-jaff
code-jaff

Reputation: 9330

Either you can do this,

<label>
    <fieldset class="registration_code">
    <legend>Registration Code</legend>
    <input type="text" name="regis_code" id="regis_code"/>    
    <input type="button" class="button2" name="Submit" value="Continue"/>
    </fieldset>
</label>​

or this,

fieldset{
    display : inline-block;
}​

DEMO

Upvotes: -1

Related Questions