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

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 netty整合springboot之后自动重连失效
  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题：需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击