Textareaの幅とDIV幅の動作が異なるのはなぜですか？

私は一連のdivボックスの後に、同じスタイルを採用する同じクラスのtextareaが続きますが、textareaではなく、divが自動的に親の水平幅を埋めるように見えることがわかりました。 textareawidth:100%は問題を解決しますが、共有クラスmargin-left:80pxを与えた場合、textareaは親を超え、divのボックスは親を超えます。Textareaの幅とDIV幅の動作が異なるのはなぜですか？

この現象がなぜ発生するのか、それがtextareaで複製できるのかどうか不思議です。私が今までに持っている最もクリーンなソリューションはtextareawidth:calc(100%-80px)ですが、より自然な解決策が好まれます。

ここではいくつかのサンプルコードがあります： -

HTML

<body> 

    <div class="container"> 

     <div class="box"> 
     DIV 
     </div> 

     <div class="box"> 
     DIV 
     </div> 

     <form> 
      <textarea class="box">TEXTAREA</textarea> 
     </form> 

    </div> 

</body>

CSS

.container { 
    background: #bbb; 
    padding: 30px; 
    box-sizing: border-box; 
} 

.box { 
    height: 80px; 
    background: #888; 
    box-sizing: border-box; 
    margin: 0 0 50px 80px 
} 

textarea { 
    width: calc(100% - 80px); // CLEANISH SOLUTION 
}

はここJSFiddleです：https://jsfiddle.net/tndm2eqz/1/

出典

2016-04-07 Alluziion

textareaはデフォルトでdisplay:blockとwidth:100%;をテキストエリアに追加する必要があります。なぜなら、.box div内のテキストエリアを取り、textarea幅をブロックで100％にしてください。例えば

それはCSS与えられた適用ん

.container { 
 
    background: #bbb; 
 
    padding: 30px; 
 
    box-sizing: border-box; 
 
} 
 

 
.box,.box textarea { 
 
    height: 80px; 
 
    background: #888; 
 
    box-sizing: border-box; 
 
} 
 
.box{ 
 
    margin: 0 0 50px 80px; 
 

 
} 
 
.box textarea { 
 
    display: block; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="box"> DIV </div> 
 
    <div class="box"> DIV </div> 
 
    <form> 
 
     <div class="box"> 
 
      <textarea>TEXTAREA</textarea> 
 
     </div> 
 
    </form> 
 
</div>

出典

2016-04-07 13:08:44

あなたは、HTMLの構造を変更しました。私は、サイジングが異なる理由を理解するために、構造体を保持している間に同じように見えるようにすることが重要だと考えています。 – DarkDust

が、<form>のでwidthがprperly継承されていないとの間にある：https://jsfiddle.net/tndm2eqz/3/

.container { 
 
    background: #bbb; 
 
    padding: 30px; 
 
    box-sizing: border-box; 
 
} 
 

 
.box { 
 
    height: 80px; 
 
    background: #888; 
 
    box-sizing: border-box; 
 
    margin: 0 0 50px 80px; 
 
} 
 

 
form { 
 
    margin: 0 0 50px 80px; 
 
    padding: 0; 
 
} 
 

 
textarea.box { 
 
    width: 100%; 
 
    display: block; 
 
    margin:0; 
 
    box-sizing: border-box; 
 
}

<body> 
 

 
    <div class="container"> 
 

 
    <div class="box"> 
 
     DIV 
 
    </div> 
 

 
    <div class="box"> 
 
     DIV 
 
    </div> 
 

 
    <form> 
 
     <textarea class="box">TEXTAREA</textarea> 
 
    </form> 
 

 
    </div> 
 

 
</body>

出典

2016-04-07 13:08:57

あなたのソリューションは 'width：100％;'と 'box-sizing：border-box;'も追加しています。どうして？ – DarkDust

確かに、継承は 'text'から' form'を通して継承されるべきですか？私はまた、 'width：inherit'と' width：100％ 'を' form'と 'textarea'の両方に指定しようとしましたが、どちらも望みの結果を生み出していませんでした。 – Alluziion

@DarkDustボックスサイズ設定は既に.boxに設定されていました。ボーダーと幅計算にパディングが含まれています...デフォルトではtextareaが持っています –

div表示タイプは、textareaとは異なり、blockです。

textarea{ 
    display: block; 
}

を約textarea年代の境界線と影を忘れないでください：あなたはtextareaがdivとして動作するようにしたい場合は、これを追加します。

出典

2016-04-07 13:08:59 begoyan

'display：block'を' textarea'に追加することは、私が提供したJSFiddleの結果と大きな違いはありません。また、他のいくつかの表示値を無駄に試してみました。 – Alluziion

.container { 
 
    background: #bbb; 
 
    padding: 30px; 
 
    box-sizing: border-box; 
 
    width:100%; 
 
    margin:0px; 
 
} 
 

 
.box { 
 
    height: 80px; 
 
    background: #888; 
 
    box-sizing: border-box; 
 
    margin: 0 0 50px 0; 
 
    width:100%; 
 
}

<body> 
 
    
 
    <div class="container"> 
 
    <div class="box"> 
 
    DIV 
 
    </div> 
 

 
    <div class="box"> 
 
    DIV 
 
    </div> 
 

 
    <form> 
 
     <textarea class="box" rows="10">TEXTAREA</textarea> 
 
    </form> 
 

 
    </div> 
 

 
</body>

出典

2016-04-07 13:20:27

説明のないちょっとしたコードはほとんど役に立ちません。変更した理由とその理由を説明してください。 – DarkDust

Textareaの幅とDIV幅の動作が異なるのはなぜですか？

答えて

関連する問題