gpt4 book ai didi

jquery - CSS Textarea 宽度错误,左右边距也错误

转载 作者:行者123 更新时间:2023-12-01 07:51:19 24 4
gpt4 key购买 nike

我创建了一个 fiddle 来展示一些奇怪的东西。我创建了一个 200px 宽度的 DIV,并在这个 DIV 中使用 CSS 插入了一个文本区域。因为它是一个像设计的其余部分一样的盒子 div,所以我需要 texarea 具有 10px 左边距和 10px 右边距,所以我编辑了边距并将 textarea 的宽度设置为 180,因为如果外部 div 为 200px 且左内边距为 10px - 10px 右内边距我还剩下 180px 用于文本区域宽度

这是我使用的代码:

CSS

#messenger {
margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom:10px;
width:180px; height:64px; overflow:auto;
background:#ffffff; font-size:11px; font-weight:normal; color:#333333;
border:1px solid #666666;
padding-left:5px;padding-right:5px;padding-top:2px;
}

#outer {width:200px;background:#cccccc;}

HTML

<div id="outer">
<textarea name="message" id="messenger" form="chat" maxlength="100" onFocus="if(this.value==this.defaultValue)this.value='';">
Your message here
</textarea>
</div>

嗯,它看起来很糟糕,这是演示:

https://jsfiddle.net/f3d1t223/

And also a screenshot

我真的需要它也有 1px 的边框。有什么想法为什么会发生这种情况吗?

最佳答案

看看这个。

#messenger {
margin:10px;
width:168px;
height:64px;
overflow:auto;
background:#ffffff;
font-size:11px;
font-weight:normal;
color:#333333;
border:1px solid #666666;
padding-left:5px;
padding-right:5px;
padding-top:2px;
}

#outer {width:200px;background:#cccccc;}
<div id="outer">
<textarea name="message" id="messenger" form="chat" maxlength="100" onFocus="if(this.value==this.defaultValue)this.value='';">
Your message here
</textarea>
</div>

根据您的代码,您还具有填充和边框大小,因此需要减少文本区域宽度的这些值。

关于jquery - CSS Textarea 宽度错误,左右边距也错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29856109/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com