jQuery DIV 内的右对齐按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21708383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Right Align Button inside DIV
提问by Sven Grosen
I'm more comforable as a back-end developer, but I've got a styling question that has me stumped. I've got a sample of my scenario posted here.
作为后端开发人员，我更自在，但我有一个样式问题让我难倒。我在此处发布了我的场景示例。
I'm creating a div that is shown/hidden based on a button click to show details for a particular item. That part is working fine, but the layout of this is not quite there.
我正在创建一个基于单击按钮显示/隐藏的 div，以显示特定项目的详细信息。那部分工作正常，但它的布局并不完全存在。
Here's the basic layout:
这是基本布局：
<div id="signaturePopup">
<label id="signatureTitle">View Signature</label>
<div id="signatureImage">
<!--Contains img-->
</div>
<div id="signatureFooter">
<div id="signatureStatus">
<!-- Contains another img -->
</div>
<label id="signatureUserDetails">Added via JS</label>
<!-- This is the problematic control-->
<input id="closeSignature" type="button" value="Close" />
</div>
</div>
With accompanying CSS:
随附的 CSS：
#signatureTitle {
text-transform: uppercase;
font-size: 16px;
}
#signatureFooter {
bottom: 0;
position: absolute;
}
#signatureFooter > div, #signatureFooter > label, #signatureFooter > input {
display: inline;
}
#signatureFooter > input {
right: 0;
align:
}
#signatureImage > img {
height: 90%;
width: 90%;
border: grey 1px solid;
display: block;
margin-left: auto;
margin-right: auto;
}
I want everything in the div signatureFooterpinned to the bottom, which is working fine with my existing CSS. However, inside of that div, I want closeSignatureto be pinned to the right. I've tried playing with the positionattribute, like giving it absolutebut that pushes it outside of the containing div signaturePopup. What am I missing? I'm assuming this is easy, but, as I mentioned earlier, CSS is not my strong-suit. Any suggestions on easier/better overall layout would also be welcome.
我希望 div 中的所有内容都signatureFooter固定在底部，这与我现有的 CSS 一起工作正常。然而，在那个 div 里面，我想closeSignature被固定在右边。我试过使用该position属性，就像给它一样，absolute但这会将它推到包含 div 之外signaturePopup。我错过了什么？我假设这很容易，但是，正如我之前提到的，CSS 不是我的强项。任何关于更简单/更好的整体布局的建议也将受到欢迎。
I am using jQuery to dynamically add the imgcontrols, if that opens up any possibilities.
This questionseemed somewhat similar at first glance, but I don't think I am dealing with any div's being too large.
我正在使用 jQuery 动态添加img控件，如果这开辟了任何可能性。
这个问题乍一看似乎有些相似，但我不认为我在处理任何 div 太大的问题。
EDIT
Two details I omitted originally are
编辑
我最初省略的两个细节是
- I want the
signatureStatusandsignatureUserDetailscontrols to stay left-aligned. I only wantcloseSignaturepinned to the right. signatureFooterneeds to stay belowsignatureImage, some of the initial answers have them overlapping.
- 我希望
signatureStatus和signatureUserDetails控件保持左对齐。我只想closeSignature固定在右边。 signatureFooter需要保持在下面signatureImage，一些最初的答案使它们重叠。
回答by Prem Anand
回答by haseebahmad
try float: right css property to pin the close signature to right side.
尝试 float: right css 属性将关闭签名固定到右侧。
回答by Robert Hickman
Just so you know, CSS has some weird issues with inheritance, especially around the position attribute. Give the signaturePopup div a position of relative and then try playing with the positioning.
正如您所知，CSS 在继承方面存在一些奇怪的问题，尤其是在 position 属性方面。给 signaturePopup div 一个相对位置，然后尝试使用该定位。
Here is a fiddle that I think does what you want: http://jsfiddle.net/k9HxW/
这是我认为可以满足您要求的小提琴：http: //jsfiddle.net/k9HxW/
Also, note that we usually try not to put styles onto IDs in CSS and instead try to give them to classes:
另外，请注意，我们通常尽量不将样式放在 CSS 中的 ID 上，而是尝试将它们提供给类：
.signaturePopup{
position: relative;
}
回答by Josh Powell
You need to give the parent element position: relative;if you are using absolutepositioned elements.
position: relative;如果您使用absolute定位元素，则需要提供父元素。
css:
css：
#signaturePopup {
position: relative;
}
#signatureFooter {
bottom: 0;
right: 0;
position: absolute;
background: #f7f7f7;
}
Finally, a fiddle: Demo
最后，一个小提琴：演示
