1

我无法将段落元素与一组按钮元素对齐。我正在使用 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() 调用中使用单引号有一些编辑问题）

4

3 回答 3

3 
#theDiv * {
display:inline;
}

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

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

于 2012-09-10T03:07:21.517 回答
1

段落和 div 是块类型，这意味着它们后面会自动换行。输入不是，如果您希望“设计名称”后面不跟中断，您可能应该把它放在一个跨度中（跨度被认为是内联元素，它加入了它们周围的文本流）。上面评论中提到的浮动也可以，但它会带来更多的包袱——如果你只是想把一堆简单的项目放在同一行，内联元素（或在css）。

于 2012-09-10T03:07:42.673 回答
1

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

/*css rule*/

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

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

于 2012-09-10T03:17:17.547 回答