我有一个按钮和一个文本区:
null
.text2
{
font-size:15px;
resize:none;
background-color:#FFFFFF;
width:80%;
height:300px;
margin: 5px 0 10px 0;
}
#btn1
{
margin-top: 5px;
margin-bottom: 10px;
}
<textarea id="input1" class="text2" type="text" placeholder="Please enter your writing..." onpropertychange="cop()" oninput="cop()"></textarea>
<button onclick="saveText()" type="button" class="btn btn-primary" id="btn1"><span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> save as</button>
null
现在我想让它们像这样向右或向左对齐:
运行代码段按钮和文本区如何向左对齐?
有多种方法可以做到这一点。其基本思想是使您的文本区域DOM占据整行。根据需要,您可以将文本区域标记为display:block
,也可以使用flex-column
。
null
.text2
{
font-size:15px;
resize:none;
background-color:#FFFFFF;
width:80%;
height:300px;
margin: 5px 0 10px 0;
/* add this line to make this element occupy the entire line */
display: block;
}
#btn1
{
margin-top: 5px;
margin-bottom: 10px;
}
<textarea id="input1" class="text2" type="text" placeholder="Please enter your writing..." onpropertychange="cop()" oninput="cop()"></textarea>
<button onclick="saveText()" type="button" class="btn btn-primary" id="btn1"><span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> save as</button>
要将按钮移动到下方,有许多选项。
您可以使占用
100%
的宽度
,这样按钮就不会占用空间,从而强制它移动到下一行:
null
.text2 {
font-size: 15px;
resize: none;
background-color: #FFFFFF;
width: 100%;
height: 300px;
margin: 5px 0 10px 0;
}
#btn1 {
margin-top: 5px;
margin-bottom: 10px;
}
<textarea id="input1" class="text2" type="text" placeholder="Please enter your writing..." onpropertychange="cop()" oninput="cop()"></textarea>
<button onclick="saveText()" type="button" class="btn btn-primary" id="btn1"><span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> save as</button>