Question

我正在努力让我的文本框多行，同时保持设计。我是HTML / CSS的新手，所以请让我知道你是怎么做这些人的。

另外，我正试图将按钮放在底部文本框的中央。

这是我现在的代码：

<html>
    <body>
        <form name="form" method="post">

        <style>
      input.maintext {
    background: white;
    border: 1px double #DDD;
    border-radius: 5px;
    box-shadow: 0 0 5px #333;
    color: #666;
    float: left;
    padding: 5px 10px;
    width: 305px;
    outline: none;

}

</style>
<style>

.savebutton {
    -moz-box-shadow: 0px 0px 0px 0px #3dc21b;
    -webkit-box-shadow: 0px 0px 0px 0px #3dc21b;
    box-shadow: 0px 0px 0px 0px #3dc21b;
    background-color:#44c767;
    -moz-border-radius:34px;
    -webkit-border-radius:34px;
    border-radius:34px;
    border:1px solid #51b05a;
    display:inline-block;
    cursor:pointer;

    color:#ffffff;
    font-family:arial;
    font-size:19px;
    padding:3px 16px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
    background-color:#79cf4b;
}
.myButton:active {
    position:relative;
    top:1px;
}


</style>



            <input type="text" class="maintext" name="text_box"/>
            <br>
            <br>

            <input type="submit" class="savebutton" id="search-submit"  value="Save" />

        </form>
    </body>
</html>
<?php
    if(isset($_POST['text_box'])) { //only do file operations when appropriate
        $a = $_POST['text_box'];
        $myFile = "t.txt";
        $fh = fopen($myFile, 'w') or die("can't open file");
        fwrite($fh, $a);
        fclose($fh);
    }
?>

Answer 1

您不能在

中添加多行

<input type="text">

为此您需要：

<TEXTAREA></TEXTAREA>

从CSS到JavaScript的代码的其他所有内容都将完全相同。

Answer 2

要使一个按钮居中，它已经在一个块元素（在这种情况下是形式），你需要添加的是你的CSS：

text-align: center;

durbnpoisn在html上钉它 - 使用文本区域。

http://www.w3schools.com/tags/tag_textarea.asp

编辑：

重读问题。你不能将与其中一个兄弟姐妹相关的元素集中在一起 - 只有它的父母。您想要做的是让textarea扩展整个表单：

width: 100%;

然后按钮将与textarea和表单

对齐

Answer 3

将buttom放在文本框内，margin-top直到你到达底部并且margin-left：auto;余量右：汽车;

此外，您可以在设置第二个元素btw

的样式时保持样式标记打开

在HTML中的文本框中添加多行

3 个答案: