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

只需使元素内联而不是块即可。

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

Answer 2

段和div是块类型的，这意味着它们会自动跟在换行符之后。 输入不是，如果您不希望在“设计名称”后接中断，则应将其放在一个跨度中（跨度被视为内联元素，它们将围绕它们的文本流连接在一起）。 上面的注释中提到的浮动操作也可以，但是会带来更多负担-如果您只是想将一堆简单的项目保留在同一行，内联元素（或在该行中设置“ display：inline” css）。

Answer 3

您可以对这些按钮使用css规则来实现此目的：

/*css rule*/

#buttonMenuDiv > input{
   display: inline-block;
}

您可以将显示设置为嵌入式或嵌入式块。 但是，如果将它们设置为内联，则'width'和'height'属性将不再生效。