V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
darasion
V2EX  ›  问与答

请教CSS问题。textarea设置了padding 后百分比宽度溢出的问题。

  •  
  •   darasion · 2010-10-20 00:09:23 +08:00 · 10136 次点击
    这是一个创建于 5184 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <style>
    div{
    width:90%;
    background:#f00;
    }

    textarea{
    width:100%;
    padding:20px;
    }
    </style>

    <div><textarea></textarea></div>

    代码如上。

    textarea 的宽度大约会溢出外边 div 的 20px*2 = 40px。

    这个如何解决呢?
    11 条回复    1970-01-01 08:00:00 +08:00
    no2x
        1
    no2x  
       2010-10-20 00:31:50 +08:00
    直接解决的办法不会。

    小聪明的办法一个:Div 的 Css 里加上一个 padding:0 40px 0 0;
    darcy
        2
    darcy  
       2010-10-20 00:51:04 +08:00
    <style type="text/css">
    textarea
    {
    width:100%;
    }
    .textwrapper
    {
    border:1px solid #999999;
    margin:5px 0;
    padding:30px;
    }
    .container{
    width:90%;
    }
    </style>
    <div class="container">
    <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
    </div>
    darcy
        3
    darcy  
       2010-10-20 01:02:45 +08:00
    使用这个更标准

    http://gist.github.com/634572
    chone
        4
    chone  
       2010-10-20 01:25:19 +08:00
    lz的意思是需要让textarea和容器边界有20px的间隙,
    还是需要让容器的宽度只有90%?
    POPOEVER
        5
    POPOEVER  
       2010-10-20 01:36:15 +08:00 via iPad
    padding 是不计入盒模型宽度的
    POPOEVER
        6
    POPOEVER  
       2010-10-20 01:38:54 +08:00 via iPad
    估摸着你要的效果应该用 div {width:100%} textarea {margin:0 20px} 来解决
    AJ
        7
    AJ  
       2010-10-20 09:04:34 +08:00
    不要用width:100%,任何容器加上此再加padding都会溢出
    AJ
        8
    AJ  
       2010-10-20 09:07:51 +08:00
    What Does “width: 100%” Do in CSS?
    http://www.impressivewebs.com/width-100-percent-css/
    qifei
        9
    qifei  
       2010-10-20 10:06:11 +08:00
    行李员真是诲人不倦啊
    darasion
        10
    darasion  
    OP
       2010-10-20 12:43:28 +08:00
    我最终决定,放弃padding了。
    POPOEVER
        11
    POPOEVER  
       2010-10-20 14:07:12 +08:00
    用 remainder 确实可以

    http://gist.github.com/635852
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1091 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 144ms · UTC 18:48 · PVG 02:48 · LAX 10:48 · JFK 13:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.