1. 首页
  2. 问题列表
  3. 如何使两个元素对齐
提问者：小点点

如何使两个元素对齐


我有一个按钮和一个文本区：

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

现在我想让它们像这样向右或向左对齐：

运行代码段按钮和文本区如何向左对齐？


共2个答案

匿名用户

有多种方法可以做到这一点。其基本思想是使您的文本区域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>

匿名用户

要将按钮移动到