HTML:在屏幕的左侧和右侧有文本区域

问题描述:

我正在尝试使它成为一个页面,文本区域左对齐,文本区域右对齐。目前,我只能让它与一个左对齐的工作。这是我的代码到目前为止。HTML:在屏幕的左侧和右侧有文本区域


div { 
 
    height: 90px; 
 
    line-height: 90px; 
 
    text-align: left; 
 
    border: 2px dashed #f69c55; 
 
    }
<div> 
 
    
 
    <h1 align = "center"> Chat Room </h1> 
 
    <form> 
 

 
    Chat <br> 
 
    <textarea rows="20" cols = "100"> </textarea> 
 
    <br> <br> 
 
    <input type="submit" value="Submit Chat"> 
 
    </form> 
 

 
    </div>

+0

其他textarea在哪里?我只看到一个。 –

+0

我没有在这里,因为我不知道如何正确实施它。 –

您需要将以下CSS分配给textarea

display: inline-block; 
width: 48.5%; /* allowing for margin, paddings, outlines, etc. */ 

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
<style> 
 
div { 
 
height: 90px; 
 
line-height: 90px; 
 
text-align: left; 
 
border: 2px dashed #f69c55; 
 
} 
 
textarea { 
 
    display: inline-block; 
 
    width: 48.5%; 
 
} 
 
</style> 
 

 
<div> 
 

 
<h1 align = "center"> Chat Room </h1> 
 
<form> 
 

 
Chat <br> 
 
<textarea rows="20" cols = "100"> </textarea> 
 
<textarea rows="20" cols = "100"> </textarea> 
 
<br> <br> 
 
<input type="submit" value="Submit Chat"> 
 
</form> 
 

 
</div>

<style> 
.. 
#tx1{ 
float: left; 
} 
#tx2{ 
float: right; 
} 
</style> 
.. 
<textarea id="tx1" rows="20" cols = "100"> </textarea> 
<textarea id="tx2"rows="20" cols = "100"> </textarea> 

缺少第二个文本区域?