[英]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.
我正在使用jQuery和CSS尝试执行此操作。
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.
因此,具有DesignName文本,然后在一行的右边立即具有按钮。
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. “ DesignName”类仅指定字体属性(大小,颜色),因此未包括在内。 Thanks for any help.
谢谢你的帮助。
(Having some EDITING trouble with the single quotes in the append() calls) (对append()调用中的单引号有一些编辑上的麻烦)
#theDiv * {
display:inline;
}
Just make the elements inline instead of block. 只需使元素内联而不是块即可。
Paragraph's and div's are of block type, which means they are automatically followed by a line break. 段和div是块类型的,这意味着它们会自动跟在换行符之后。 Input's are not, and if you want "Design Name" to not be followed by break, you should probably just put it in a span (span's are considered inline elements, which join the flow of text around them).
输入不是,如果您不希望在“设计名称”后接中断,则应将其放在一个跨度中(跨度被视为内联元素,它们将围绕它们的文本流连接在一起)。 Floating as mentioned in the above comments will also work, but it comes with a bit more baggage - if you're just trying to keep a bunch of simple items on the same line, inline elements (or setting "display: inline" in the css).
上面的注释中提到的浮动操作也可以,但是会带来更多负担-如果您只是想将一堆简单的项目保留在同一行,内联元素(或在该行中设置“ display:inline” css)。
You can use a css rule for those buttons to implement this: 您可以对这些按钮使用css规则来实现此目的:
/*css rule*/
#buttonMenuDiv > input{
display: inline-block;
}
You can set display to inline or inline-block. 您可以将显示设置为嵌入式或嵌入式块。 But if you set them to inline, the 'width' and the 'height' attributes will not take effect any more.
但是,如果将它们设置为内联,则'width'和'height'属性将不再生效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.