右键对齐放置按钮

时间:2011-07-09 02:37:17

标签: html css

我使用此代码右对齐按钮。

<p align="right">
  <input type="button" value="Click Me" />
</p>

但是P标签浪费了一些空间,所以希望用span或div做同样的事情。

11 个答案:

答案 0 :(得分:334)

您使用哪种对齐方法取决于您的具体情况,但基本方法是float: right;

<input type="button" value="Click Me" style="float: right;">

您可能希望清除浮动,但可以使用父容器上的overflow:hidden或容器底部的显式<div style="clear: both;"></div>来完成。

例如:http://jsfiddle.net/ambiguous/8UvVg/

浮动元素从普通文档流中移除,因此它们可以溢出其父级边界并弄乱父级的高度,clear:both CSS负责处理(与overflow:hidden一样)。使用我添加的JSFiddle示例来查看浮动和清除行为的方式(您首先要删除overflow:hidden)。

答案 1 :(得分:23)

另一种可能性是使用面向右侧的绝对定位:

<input type="button" value="Click Me" style="position: absolute; right: 0;">

以下是一个例子:https://jsfiddle.net/a2Ld1xse/

此解决方案有其缺点,但有些用例非常有用。

答案 2 :(得分:8)

这个解决方案依赖于Bootstrap 3,正如@günther-jena所指出的那样

试试import UIKit class ViewController: UIViewController { @IBOutlet var txtSearch : UITextField! @IBOutlet var tblUserData : UITableView! var myArrayOfDict: NSMutableArray = [] override func viewDidLoad() { super.viewDidLoad() myArrayOfDict = [["UserName": "Hasya", "UserID": "1", "UserImage": "1.png"],["UserName": "Demo", "UserID": "2", "UserImage": "2.png"],["UserName": "Hasya & Hasya", "UserID": "3", "UserImage": "3.png"],["UserName": "Demo User", "UserID": "4", "UserImage": "4.png"]] tblUserData.layer.borderColor = UIColor.blueColor().CGColor tblUserData.layer.borderWidth = 1.0 } func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return myArrayOfDict.count } func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { let cell : CustomCell! = tableView.dequeueReusableCellWithIdentifier("CustomCell", forIndexPath: indexPath) as! CustomCell cell.imgUser.layer.cornerRadius = cell.imgUser.frame.size.height/2 let strImageName : String = (myArrayOfDict.objectAtIndex(indexPath.row).valueForKey("UserImage") as? String)! cell.imgUser.image = UIImage(named: (strImageName)) cell.lblName.text = myArrayOfDict.objectAtIndex(indexPath.row).valueForKey("UserName") as? String return cell } func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { let str : String = (myArrayOfDict.objectAtIndex(indexPath.row).valueForKey("UserName") as? String)! txtSearch.text = txtSearch.text! + str // String(format:"@", myArrayOfDict.objectAtIndex(indexPath.row).valueForKey("UserName") as? String) UIView.animateWithDuration(0.5) { () -> Void in var frameOftblUserData : CGRect = self.tblUserData.frame frameOftblUserData.origin.y = 264 frameOftblUserData.size.height = 0 self.tblUserData.frame = frameOftblUserData } } func textField(textField: UITextField, shouldChangeCharactersInRange range: NSRange, replacementString string: String) -> Bool { print(string) if string.hasPrefix("@") { print("YES") UIView.animateWithDuration(0.5) { () -> Void in var frameOftblUserData : CGRect = self.tblUserData.frame frameOftblUserData.origin.y = 132 frameOftblUserData.size.height = 132 self.tblUserData.frame = frameOftblUserData } } else { print("NO") UIView.animateWithDuration(0.5) { () -> Void in var frameOftblUserData : CGRect = self.tblUserData.frame frameOftblUserData.origin.y = 264 frameOftblUserData.size.height = 0 self.tblUserData.frame = frameOftblUserData } } return true; } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } 。这样,您就不需要额外的标记或规则来清除浮动元素。

答案 3 :(得分:5)

如果该按钮是element上唯一的block

&#13;
&#13;
.border {
  border: 2px blue dashed;
}

.mr-0 {
  margin-right: 0 !important;
}
.ml-auto {
  margin-left:auto !important;
}
.d-block {
  display:block !important;
}
&#13;
<p class="border">
  <input type="button" class="d-block mr-0 ml-auto" value="The Button">
</p>
&#13;
&#13;
&#13;

如果elements上有其他 block

&#13;
&#13;
.border {
  border: 2px indigo dashed;
}

.d-table {
  display:table !important;
}

.d-table-cell {
  display:table-cell !important;
}

.w-100 {
  width: 100% !important;
}

.tar {
  text-align: right !important;
}
&#13;
<div class="border d-table w-100">
  <p class="d-table-cell">The paragraph.....lorem ipsum...etc.</p>
  <div class="d-table-cell tar">
    <button >The Button</button>
  </div>
</div>
&#13;
&#13;
&#13;

使用flex-box

&#13;
&#13;
.flex-box {
  display:flex;
  justify-content:space-between;
  outline: 2px dashed blue;
}

.flex-box-2 {
  display:flex;
  justify-content: end;
  outline: 2px deeppink dashed;
}
&#13;
<h1>Button with Text</h1>
<div class="flex-box">
<p>Once upon a time in a ...</p>
<button>Read More...</button>
</div>

<h1>Only Button</h1>
<div class="flex-box-2">
  <button>The Button</button>
</div>
&#13;
&#13;
&#13;

祝你好运......

答案 4 :(得分:4)

它并不总是那么简单,有时对齐方式必须在容器中定义,而不是在Button元素本身中定义!

对于您的情况,解决方案将是

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

我已经谨慎地指定width=100%,以确保<div>占据其容器的整个宽度。

我还添加了padding:0以避免与<p>元素一样出现空格。

我可以说,如果在FSF / Primefaces表的页脚中定义了<div>,则float:right将无法正常工作,因为Button的高度将变得高于页脚的高度!

在这种Primefaces情况下,唯一可接受的解决方案是在容器中使用text-align:right

使用此解决方案,如果您有6个要右对齐的按钮,则必须仅在容器中指定此对齐方式:-)

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me 1"/>
    <input type="button" value="Click Me 2"/>
    <input type="button" value="Click Me 3"/>
    <input type="button" value="Click Me 4"/>
    <input type="button" value="Click Me 5"/>
    <input type="button" value="Click Me 6"/>
</div>

答案 5 :(得分:3)

另一种可能性是使用面向右侧的绝对定位。你可以这样做:

style="position: absolute; right: 0;"

答案 6 :(得分:2)

2019年使用 flex-box

的现代方法

带有 div 标签

<div style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

带有 span 标签

<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</span>

答案 7 :(得分:2)

<div style = "display: flex; justify-content:flex-end">
    <button>Click me!</button>
</div>

<div style = "display: flex; justify-content: flex-end">
    <button>Click me!</button>
</div>

答案 8 :(得分:1)

要将按钮保留在页面流中:

<input type="button" value="Click Me" style="margin-left: auto; display: block;" />

(将该样式放入.css文件中,请勿使用此html内联代码,以便更好地维护)

答案 9 :(得分:0)

这可以解决。

<input type="button" value="Text Here..." style="float: right;">

祝您代码顺利!

答案 10 :(得分:0)

就我而言

max_input_vars = 10000

工作正常