右对齐DIV中的按钮 [英] Right Align Button inside DIV

问题描述

作为后端开发者，我更加可爱，但我有一个造型的问题，让我失望。我有一个这里的示例。

我创建一个div，显示/隐藏基于按钮点击显示特定项目的详细信息。

这是基本的布局：

 < div id =signaturePopup> 
< label id =signatureTitle>查看签名< / label> 
< div id =signatureImage> 
<！ - 包含img  - > 
< / div> 
< div id =signatureFooter> 
< div id =signatureStatus> 
<！ - 包含另一个img  - > 
< / div> 
< label id =signatureUserDetails>通过JS添加< / label> 
<！ - 这是有问题的控制 - > 
< input id =closeSignaturetype =buttonvalue =关闭/> 
< / div> 
< / div> 
  

随附CSS：

  #signatureTitle {
 text-transform：uppercase; 
 font-size：16px; 
} 
 #signatureFooter {
 bottom：0; 
 position：absolute; 
} 
 #signatureFooter> div，#signatureFooter> label，#signatureFooter> input {
 display：inline; 
} 
 #signatureFooter>输入{
 right：0; 
 align：
} 
 #signatureImage> img {
 height：90％; 
 width：90％; 
 border：gray 1px solid; 
 display：block; 
 margin-left：auto; 
 margin-right：auto; 
} 
  

我想要div signatureFooter 固定到底部，这是工作正常与我现有的CSS。但是，在该div内部，我想将 closeSignature 固定在右侧。我试过玩 position 属性，比如给它 absolute ，但是把它推出包含div signaturePopup 。我缺少什么？我假设这很容易，但正如我前面提到的，CSS不是我的强套。

我使用jQuery来动态添加 img 。


此问题在第一眼看起来有点相似，但我不认为我处理任何div的太大。

EDIT

我最初省略的两个详细信息是

1. 我想要 signatureStatus 和 signatureUserDetails 控件保持左对齐。我只想将 closeSignature 固定在右侧。


2. signatureFooter c> 方案

将父div的宽度设置为100％。您可以向右移动关闭按钮。

  #signatureFooter> input {
 float：right; 
} 
 
 #signatureFooter {
 bottom：0; 
 position：absolute; 
 width：100％; 
  

JSFiddle

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.

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:

#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 signatureFooter pinned to the bottom, which is working fine with my existing CSS. However, inside of that div, I want closeSignature to be pinned to the right. I've tried playing with the position attribute, like giving it absolute but 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.

I am using jQuery to dynamically add the img controls, if that opens up any possibilities.

This question seemed somewhat similar at first glance, but I don't think I am dealing with any div's being too large.

EDIT
Two details I omitted originally are

1. I want the signatureStatus and signatureUserDetails controls to stay left-aligned. I only want closeSignature pinned to the right.
2. signatureFooter needs to stay below signatureImage, some of the initial answers have them overlapping.

解决方案

set the width of the parent div to 100%.So you can float the close button right.

#signatureFooter > input {
float:right;
}

#signatureFooter {
    bottom: 0;
    position: absolute;
    width:100%;

JSFiddle

这篇关于右对齐DIV中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！