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

Error in JavaMail when running Selenium

javamail

I'm trying to extract an email running selenium and maven but I get the following error when trying to connect:

how can I convert 2 strings to numbers and add them using javascript?

javascript

I have str1, str2 and I want to add them. For example, str1 = '5' and str2 = '2.50000'. I would like to add them together and get 7.50. I have tried many (unsuccessful) variations, the latest is:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.