javascript - CSS如何水平对齐一组元素？

Question

我无法将段落元素与一组按钮元素对齐。我正在使用 jQuery 和 CSS 来尝试执行此操作。

这是我看到的:

理想情况下，我希望它们都位于屏幕顶部的同一条水平线上，以避免像我一样浪费像素空间。因此，让 DesignName 文本紧接着在它的右边一行中有按钮。

这是在代码中添加元素的方式:

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" >');

“DesignName”类仅指定字体属性(大小、颜色)，因此我没有包含它。谢谢你的帮助。

(在 append() 调用中的单引号有一些编辑问题)

Answer 1

#theDiv * {
display:inline;
}

只需将元素设为内联而不是 block 。

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