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'屬性將不再生效。