我使用此代码右对齐按钮。
<p align="right">
<input type="button" value="Click Me" />
</p>
但是P标签浪费了一些空间,所以希望用span或div做同样的事情。
答案 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
:
.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;
elements
上有其他 block
:
.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;
flex-box
:
.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;
祝你好运......
答案 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
工作正常