html中怎么将标签左对齐,而文本框右对齐的方法

Posted 2023-05-02

标签左对齐,而文本框右对齐，设置text-align的属性就好了，

text-align设置或检索对象中内容的水平对齐方式

取值：

left：内容左对齐。

center：内容居中对齐。

right：内容右对齐。

如图

参考技术A

你可以这样设置看看如下：

<label  class="la"></label>

<input  tyass="text" class="textBox"/>

CSS:

   1.   .la text - align : left;

   2.   .textBox text - align: right;

text-align是文本对齐样式，有三个取值，分别是：left、center、right。希望能够帮助到你。

uitextfield 左视图中的标签未与文本对齐

【中文标题】uitextfield 左视图中的标签未与文本对齐

【英文标题】：Label in uitextfield left view not aligned with the text

【发布时间】：2018-12-07 06:18:49

【问题描述】：

我正在自定义textField，在他的左视图中带有标签，但标签的文本与textField 的文本/占位符不对齐。

这是我的简单代码：

 class mytextfield: UITextField 

    override init(frame: CGRect) 
        super.init(frame: frame)

        leftViewMode = .always
        let label = UILabel()

        label.text = "Hello"
        leftView = label
    

    required init?(coder aDecoder: NSCoder) 
        fatalError("init(coder:) has not been implemented")
    

    override func leftViewRect(forBounds bounds: CGRect) -> CGRect 
        return CGRect(x: 0, y: 0, width: 40, height: bounds.height)
    

这是模拟器上的结果（我用红色下划线来查看差异）和调试视图层次结构：

如何解决这个问题？

【问题讨论】：

我认为最快的解决方案不是设置UILabel，而是将UITextField（不可选择/可编辑）设置为leftView。这是文本容器/布局/插图的问题，如果我们将它们的机器人放在框架中对齐，则 UITextView 不完全适合 UILabel。

我不确定你的意思。要将 UITextField 设置为 UITextField 的 leftView 吗？好像有点棘手……

哦等等，我明白你的意思了！我要试试！

有效！我认为这是解决这个问题的好方法，谢谢！

【参考方案1】：

func setLeftIconwithLabel(_ icon: UIImage) 
    
    let padding = 10
    let screenWidth = UIScreen.main.bounds.width
    let size = Int(screenWidth*0.04)
    
    let outerView = UIView(frame: CGRect(x: 0, y: 0, width: 70, height: size) )
    outerView.backgroundColor = .clear
    let iconView  = UIImageView(frame: CGRect(x: padding, y: 0, width: size, height: size))
    iconView.image = icon
    let label = UILabel(frame: CGRect(x: iconView.frame.origin.x+iconView.frame.width + 5, y: 0, width: 40, height: 15))
    label.text = "+ 965 "
    label.font = UIFont(name: fontName.ProximaNova_Regular, size: Font.regular12)
    outerView.addSubview(iconView)
    outerView.addSubview(label)
    
    leftView = outerView
    leftViewMode = .always
    


txtEmail.setLeftIconwithLabel(UIImage(named: "mobile") ?? UIImage())
txtEmail.placeholder = "Mobile Number"

【参考方案2】：

你这样做：

let label = UILabel()
label.text = "Hello"
leftView = label

问题在于UILabel 的默认基线、插入布局、文本容器与UITextField 默认使用的不同。

UITextView 和 UILabel 之间的它们也不相同。只需检查this related question（他们也是其他人）。作者叠加了一个UITextView和一个UILabel，渲染效果不一样。

避免重复UITextField 的整个内部布局设置并将其复制到UILabel 的快速方法是将leftView 设置为UITextField。只需将其设置为“不可选择/不可编辑”，它就会产生完美的错觉。

【参考方案3】：

这可能是两个视图的字体样式或框架的绑定大小呈现问题。尝试将y-position 或height 调整为左侧标签视图。

这不是您正在寻找的确切答案。但这可能会解决您的问题。

override func leftViewRect(forBounds bounds: CGRect) -> CGRect 
    return CGRect(x: 0, y: 0, width: 40, height: (bounds.height - 4))

或

override func leftViewRect(forBounds bounds: CGRect) -> CGRect 
    return CGRect(x: 0, y: -2, width: 40, height: bounds.height)

---

我试过这个：

class LeftViewTextfield: UITextField 

    override init(frame: CGRect) 
        super.init(frame: frame)

        leftViewMode = .always
        let label = UILabel()
        label.backgroundColor = UIColor.yellow
        label.text = "Hello"
        label.font = UIFont.systemFont(ofSize: 16)
        leftView = label
    

    required init?(coder aDecoder: NSCoder) 
        fatalError("init(coder:) has not been implemented")
    

    override func leftViewRect(forBounds bounds: CGRect) -> CGRect 
        return CGRect(x: 0, y: -0.5, width: 40, height: bounds.height)
    



class TestViewController: UIViewController 

    var textField: LeftViewTextfield?
    override func viewDidLoad() 
        super.viewDidLoad()

        setupTextField()
    

    func setupTextField() -> Void 
        textField = LeftViewTextfield(frame: CGRect(x: 40, y: 40, width: 100, height: 40))
        textField?.text = "Hello"
        textField?.font = UIFont.systemFont(ofSize: 16)
        textField?.backgroundColor = UIColor.orange
        self.view.addSubview(textField!)
    

结果：

【讨论】：

我刚试过，这不起作用：/矩形是对齐的，但不是文本

我认为Larme的评论是最好的适应性解决方案。

再想一想，你的回答也符合我的要求:)

您是否尝试过使用不同的大小（字体、框架）？那么插图可能会改变。

@Larme - 是的，你是对的。这个答案只是OP的一种提示类型的解决方案。他需要决定如何根据不同的字体样式和框架调整左视图。他还可以为两个视图设置调整字体样式的功能。