父级view中包含一个input和一个button，怎么使两个子级元素横向居中对齐的同时，按钮在输入框的右侧

可以使用 Flex 布局实现这个布局需求。具体做法是：

1. 父级元设置为 display: flex;，使其成为一个 flex 容器。

2. 给父级元素添加 justify-content: center; 属性，使其子元素在水平方向上居中对齐。

3. 将 input 元素的宽度设置为 100%。

4. 将 button 元素的 margin-left 属性设置为 auto，使其在 input 元素的右侧。

代码示例：

<div style="display: flex; justify-content: center;">
  <input type="text" style="width: 100%;">
  <button style="margin-left: auto;">按钮</button>
</div>

相关问题

在视图中添加一个按钮和view，点击按钮随机改变view的背景色

首先，在你的视图控制器中创建一个按钮和一个空的视图。

class ViewController: UIViewController {
    
    let button = UIButton()
    let viewToChange = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 设置按钮的属性
        button.setTitle("Change Color", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .systemBlue
        button.addTarget(self, action: #selector(changeColor), for: .touchUpInside)
        view.addSubview(button)
        
        // 设置视图的属性
        viewToChange.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        viewToChange.center = view.center
        view.addSubview(viewToChange)
    }
    
    // 点击按钮时随机改变视图的背景色
    @objc func changeColor() {
        let randomColor = UIColor(red: CGFloat.random(in: 0...1),
                                  green: CGFloat.random(in: 0...1),
                                  blue: CGFloat.random(in: 0...1),
                                  alpha: 1.0)
        viewToChange.backgroundColor = randomColor
    }
}

这里我们创建了一个按钮并将其添加到视图中，并为其添加了一个点击事件 `changeColor`，这个方法将随机生成一个颜色并将其设置为视图的背景色。

微信小程序，写一个悬浮view，包括圆形头像和名字，都在view上左右居中

可以通过使用组件`<view>`和`<image>`来实现。具体实现步骤如下：

1. 在`<view>`中添加`position: fixed`样式，使其可以悬浮在页面上。
2. 使用`<image>`添加圆形头像，并设置宽高、圆角和边框样式。
3. 在`<view>`中添加名字文本，并设置居中样式。

下面是示例代码：

<view class="float-view" style="position: fixed;">
  <image class="avatar" src="头像图片链接"></image>
  <text class="name">名字</text>
</view>

.float-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0 10px;
  background-color: #fff;
  box-shadow: 0 1px 10px #ccc;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.name {
  flex: 1;
  text-align: center;
}

通过以上代码，即可实现一个悬浮的view，包括圆形头像和名字，都在view上左右居中。