如何在CSS中管理textarea右側溢出？
[英]How to manage textarea right side overflow in css?
問題描述
我必須在兩個不同的<div>創建兩個<textarea> ，並且兩者都必須在同一行中。 在所有類型的屏幕中，兩個<textarea>都必須占據100％的寬度（每個寬度為50％）。
但是，當我嘗試第二個<textarea> ，右側溢出，甚至我也無法管理<textarea>右邊距（在CSS中）。 如何避免<textarea>右溢出？
.container { background-color: lightblue; border: 5px solid black; min-height: 500px; } textarea { width: 100%; height: 100%; border: 3px none #cccccc; margin: 10px 10px 10px 10px; border: 1px solid black; } .left { float: left; width: 50%; } .right { float: left; width: 50%; }
<div class='left'> <textarea>left </textarea> </div> <div class='right'> <textarea>right</textarea> </div>
4 個解決方案
解決方案1
1 2016-08-01 15:56:57
請注意textarea邊距變化。 那應該做！
.container { background-color: lightblue; border: 5px solid black; min-height: 500px; } textarea { width: 100%; height: 100%; border: 3px none #cccccc; margin: 10px 0px 10px 0px; border: 1px solid black; } .left { float: left; width: 50%; } .right { float: left; width: 50%; }
<div class='left'> <textarea>left</textarea> </div> <div class='right'> <textarea>right</textarea> </div>
解決方案2
1 2016-08-01 15:57:27
您必須從textarea刪除margin ，因為從元素的外部寬度計算出的margin ，可以改為使用.conatiner padding 。
並添加一個box-sizing屬性以從計算寬度中刪除邊框寬度
html,body,.container{ height:100%; margin:0; } .container{ background-color: lightblue; border: 5px solid black; padding:10px; display: table; width: 100%; box-sizing: border-box; } textarea { width: 100%; height: 100%; border: 3px none #cccccc; border: 1px solid black; box-sizing: border-box; } .left{ display: table-cell; width:50%; height: 100%; } .right{ display: table-cell; width:50%; height: 100%; }
<html> <body> <div class="container"> <div class='left'> <textarea>left </textarea> </div> <div class='right'> <textarea>right</textarea> </div> </div> </body> </html>
解決方案3
0 2016-08-01 15:59:44
刪除邊距。 因為您要為每個左側和右側文本區域分配50％。 因此您的總寬度將為100％+ 10px； 因此它將在x軸上溢出
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
}
解決方案4
0 已采納 2016-08-01 16:32:22
從文本區域中刪除頁邊距，因為所計算的頁邊距是元素的外部寬度，並給出display：table; 到容器。
如何在溢出時在元素的左側和右側水平分割文本？
[英]How to split text horizontally equal on left and right side of element on overflow?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.