如何使两个元素对齐

Question

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

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

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

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

Answer 1

要将按钮移动到</code下方，有许多选项。</p

您可以使</code占用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>

Answer 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>