CSS how to align group of elements horizontally?

I'm having trouble aligning a paragraph element with a group of button elements. I'm using jQuery and CSS to try and do this.

Here is what I see:

And ideally I would like them all to be on the same horizontal line at the top of the screen, to avoid wasting pixel real-estate as I am. So have the DesignName text then immediately to the right of it in a line have the buttons.

Here is how the elements are being added in code:

var theDiv = $("#theDiv");

theDiv.append('<div id="buttonMenuDiv"></div>');

var buttonDiv = $("#buttonMenuDiv");
buttonDiv.append('<p id="DesignName" class="DesignName">DesignName</p>');
buttonDiv.append('<input type="button" id="MainMenu" value="Main Menu" >');
buttonDiv.append('<input type="button" id="NewModule" value="New Module" >');
buttonDiv.append('<input type="button" id="SearchDesigns" value="Search Designs" >');
buttonDiv.append('<input type="button" id="DesignDescription" value="Design Description" >');
buttonDiv.append('<input type="button" id="SaveWork" value="Save Work" >');
buttonDiv.append('<input type="button" id="PackageDesign" value="Package Design" >');
buttonDiv.append('<input type="button" id="Tutorial" value="Tutorial" >');

The "DesignName" class just specifies font attributes (size, color) so I didn't include it. Thanks for any help.

(Having some EDITING trouble with the single quotes in the append() calls)

Answers


#theDiv * {
display:inline;
}

Just make the elements inline instead of block.

http://jsfiddle.net/v5eYt/3/


Need Your Help

How to get dtmf value in dailpan

php sip asterisk

I have one dialplan in which what i want is,if user press any key then play file again but i can not understand how to get dtmf value in dialplan.

Reflections library not working when used in an Eclipse plug-in

java eclipse reflection eclipse-plugin classloader

I have developed an application using the Reflections library for querying all the classes having a particular annotation. Everything was working like a charm until I decided to create an Eclipse p...

Static resources in GWT apps

java html css gwt war

Do you ever need to write your own HTML, CSS or JavaScript files for your GWT app? Any reason to ever write your own HTML/CSS and include it with the build? If so, under what circumstances, and whe...