Gradio 如何将 两个组件 放到 同一行上并调整 width 宽度 ？

场景

• 我在通过 Gradio 画一款 “在线语音翻译小助手” 的 web端 的 UI 界面，可是我发现，gradio 默认会将 组件按照 代码顺序依次 按“垂直线性” 的布局格式，将组件单独占行排列下去，可我想把这两个下拉框组件放到同一行上上，并各自占 50 % 的宽度。 我该怎么办呢？
  

---

问题：

Gradio 如何将 两个组件 放到 同一行上并调整各自的 width 宽度 ？

---

解决

方法1：利用 Row( ) 模块

将组件放到 Row(): 模块 下，视为同一行的组件；还可以放 Column() 模块，视为同一列的组件。

步骤1： 把 两个下拉框添 加组件到 Row() ：模块下

• width:
  官方 CSS 样式 文件会调整我们的组件 width 长度 各自的占比为 50% 。如果想给定确且的 像素值宽度，这需要我们手动写写 css 文件，具体怎么做呢，还请移步到：Gradio 如何修改 运行界面原组件的 css 样式？

步骤2：再次运行后：

示例代码

import gradio as gr

def operation(choice1,choice2):
    re = "您还未选则哦~" # 所选值
    if choice1 is not None and choice2 is not None:
        re = choice1 + " , "+choice2
    else:
        gr.Warning("还有选项没选哦~")
    return re


with gr.Blocks() as demo:
    with gr.Row():
        dp1 = gr.Dropdown(label="性别",choices=["男","女"])
        dp2 = gr.Dropdown(label="特长",choices=["腿","胳膊"])
    btn = gr.Button(value="获取下来框所选值")
    outputText = gr.Textbox(label="所选值",lines=3,placeholder="下拉框所选值")
    btn.click(fn=operation,inputs=[dp1,dp2],outputs=[outputText])


demo.launch()

---

注

• 1. 记得 导入 gradio 模块哦（ Windows ）

   pip install gradio
  

• 2. 安利一波 这个好用的可以作为 AIGC web前端开发的 工具 ： Gradio

---

写在最后

• 这对一个前端工作人员而言，值得注意的就是：
• 由于gradio 强大的 官方 CSS 样式和 js 文件 基本不需要我们怎么写 html 代码和 js 代码，只需要在python 文件中定义组件、处理函数、输入、输出 并初始化即可。
• 真的很不错，强烈推荐 感兴趣的伙伴们去用用看看 ！

---