满口金牙 2022-07-23 20:09 采纳率: 91.1%
浏览 77
已结题

Html textarea 元素 撑大父元素请教?


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <table>
        <tr>
            <!-- td 除了border 内部净空应该还有 24px -->
            <td style="height: 26px;">
                <!-- 里面放一个 22px 高的元素,  td实际高度 被撑大变成了 28.17px ,不理解这是什么梗-->
                <textarea style='height:22px;padding:1px; width: 100px;' /></textarea>
            </td>
        </tr>
    </table>
</body>
</html>
<style>
    td{
        width: 200px;
        box-sizing: border-box;
        border: 1px solid green;
        padding: 0; 
    }
    textarea{
        box-sizing: border-box;
        border: 1px solid rgb(237, 177, 205);
        resize: none;
        margin: 0;
    }
</style>

浏览器的算法没看明白啊? 已经弄明白. 要加了 display:block , 不过还是要请教 怎么设置 textarea alt + enter主动换行的问题 enter 键被占用

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2022-07-23 20:46
    关注

    inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关，不一定是 5px），所以设置 vertical-align:top/bottom/text-top/text-bottom都可以避免这种情况出现.

    在注册一个事件判断e.altKey&&e.codeKey==13或者修改监听的事件增加这个判断添加换行

    
<textarea style='height:42px;padding:1px; width: 100px;' id="ta"></textarea>
<script>
    ta.onkeydown = function (e) {
        if (e.keyCode == 13) {
            if (e.altKey) {
                this.value += '\n';//添加换行
            }
            else {
                return false;//阻止换行
            }
        }
    }
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 8月2日
  • 已采纳回答 7月25日
  • 修改了问题 7月23日
  • 修改了问题 7月23日
  • 展开全部

悬赏问题

  • ¥15 做个有关计算的小程序
  • ¥15 MPI读取tif文件无法正常给各进程分配路径
  • ¥15 如何用MATLAB实现以下三个公式（有相互嵌套）
  • ¥30 关于#算法#的问题：运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁，怎么解决
  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化