如何实现摩尔斯电码翻译器表单元素的响应式布局？

一、修复Textarea的响应式布局 #

用CSS Flexbox替代固定位置偏移，让两个textarea自动适配窗口宽度，小屏幕下自动换行：

修改后的HTML代码：

<form class="boxparent" method="post">
    <textarea class="textbox" id="input" rows="10" placeholder="Enter text here"></textarea>
    <textarea readonly class="textbox" id="output" rows="10"></textarea>
</form>
<button id="switch">Translate to English</button>

修改后的CSS代码：

.boxparent {
    display: flex;
    gap: 1rem; /* 控制两个textarea的间距 */
    flex-wrap: wrap; /* 窗口过窄时自动换行 */
    padding: 1rem;
}

.textbox {
    font-size: .8rem;
    letter-spacing: 1px;
    font-family: Palatino Linotype;
    padding: 10px;
    line-height: 1.5;
    border: 1px solid #444;
    border-radius: 5px;
    box-shadow: 1.25px 1.25px 1.25px #777;
    resize: none;
    outline: none;
    background-color: #222;
    color: white;
    flex: 1; /* 让两个textarea平分容器可用宽度 */
    min-width: 300px; /* 设置最小宽度，避免小屏幕下过窄 */
}

二、修复按钮的响应式布局 #

去掉绝对定位的固定偏移，将按钮与表单统一纳入容器布局，实现自适应对齐：

新增父容器的HTML：

<div class="container">
    <form class="boxparent" method="post">
        <textarea class="textbox" id="input" rows="10" placeholder="Enter text here"></textarea>
        <textarea readonly class="textbox" id="output" rows="10"></textarea>
    </form>
    <button id="switch">Translate to English</button>
</div>

对应的CSS：

.container {
    max-width: 1200px; /* 可选，限制页面最大宽度避免过宽 */
    margin: 0 auto; /* 让容器居中 */
    padding: 1rem;
}

#switch {
    border-radius: 20px;
    padding: 7px 15px;
    background-color: #444;
    color: #eee;
    border: 1px solid #888;
    margin-top: 1rem;
    /* 实现按钮靠右对齐 */
    display: block;
    margin-left: auto;
}

核心说明 #

• Flexbox的flex:1属性让两个textarea自动分配容器内的可用宽度，窗口缩放时同步调整
• flex-wrap: wrap确保屏幕宽度不足时，textarea自动垂直排列
• 按钮通过margin-left: auto实现自适应靠右，不再依赖固定像素偏移

内容的提问来源于stack exchange，提问作者1440p