如何使用CSS将下拉option选项框调整至右侧显示

首先需要注意，你当前的HTML代码存在ID重复问题：两个<datalist>都使用了id="station"，ID在页面中必须唯一，需要先修改为不同的ID，否则第二个输入框的下拉关联会失效。

原生<datalist>的弹出选项框属于浏览器内置UI，没有跨浏览器通用的CSS属性可以直接调整位置，以下提供两种可行实现方案：

方案1：WebKit内核浏览器（Chrome、Edge、Safari）专属调整 #

仅适配WebKit内核浏览器，通过私有CSS属性调整位置，修改你的CSS代码如下：

.input{
    border-radius: 20px;
    width: 30%;
    border: 3px solid #0026ff;
    padding: 10px;
    text-align: center;
}
.center{
    text-align: center;
    position: relative; /* 新增：父容器开启相对定位，作为下拉框定位基准 */
}
h1{
    text-align: center;
}
/* 新增：控制datalist弹出框位置 */
datalist.list {
    position: absolute;
    /* 计算位置：父容器水平中心 + 输入框一半宽度 + 10px间距，刚好在输入框右侧 */
    left: calc(50% + 15% + 10px);
    top: 0;
    width: 100px; /* 可自定义下拉框宽度 */
}
/* 可选：隐藏WebKit内核默认的下拉箭头 */
input[list]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

方案2：跨浏览器兼容实现 #

如果需要适配所有浏览器，建议放弃原生<datalist>，改用div、ul等元素自定义下拉组件：

• 给输入框绑定focus、input事件控制自定义下拉框的显示隐藏和选项过滤
• 给自定义下拉框设置position: absolute，通过left、top属性固定在输入框右侧即可，位置完全可控

内容的提问来源于stack exchange，提问作者World Suethiensakun