如何使两个元素对齐

Question

我有一个按钮和一个textarea：

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

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

如何将运行代码段按钮和textarea对齐？

Answer 1

要将您的按钮移到 <textarea> 下方，您可以选择多种方式。

你可以让<textarea>占用100%的 width ，这样按钮就没有空间可以占用，从而迫使它占用下一行：

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

或者您可以保留80% width并将按钮设置为 block-level element display: block ：< / p>

.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;
  display: block;
}

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

使用display：block

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用flex

＆＃13;

＆＃13;

/* wrap child element in flex with column direction works too */
.wrapper {
    display: flex;
    flex-direction: column;
}

.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;
}

＆＃13;

<div class="wrapper">
    <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>
</div>

＆＃13;

＆＃13;

＆＃13;