Search code examples
htmlinputcss-floatinlinefieldset

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?


Solution

  • 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; }