将确认按钮设置在输入框右侧的CSS方法

<p>&quot;&lt;div class=&quot;input-container&quot;&gt;\n  &lt;input id=&quot;inputBox&quot; type=&quot;text&quot; placeholder=&quot;请输入腾讯、爱奇艺等官方视频链接&quot;&gt;\n  &lt;button id=&quot;confirmBtn&quot;&gt;确认</button>\n</div>&quot;\n\n&quot;<style>\n.input-container {\n  display: flex;\n  align-items: center; /* 垂直居中对齐 <em>/\n}\n\n#inputBox {\n  flex: 1; /</em> 输入框占据剩余空间 <em>/\n  margin-right: 10px; /</em> 右侧留出一定的间距 <em>/\n}\n\n#confirmBtn {\n  flex-shrink: 0; /</em> 不缩小按钮的宽度 */\n}\n</style>&quot;\n\n使用CSS的flex布局可以方便地将确认按钮设置在输入框的右侧。首先，将输入框和确认按钮放置在同一个容器中，并设置容器的display属性为flex。然后，使用flex属性来控制元素的宽度和间距，最终实现确认按钮位于输入框右侧的效果。</p>