如何定位提交按钮？

I'm looking to make an offline search page powered by Google. I am having a little trouble with the search button though, it just seems to do whatever it wants. I want it to be relative above the textarea on the left. I would like for it to stay in that corner of the textarea even when the textarea is expanded. (This webpage is not designed for multi-browser supported it is, designed for Firefox only.)

我正在寻找一个由Google提供支持的离线搜索页面。我在搜索按钮上遇到了一些麻烦,它似乎只是想做任何事情。我希望它在左边的textarea之上是相对的。我希望它能留在textarea的那个角落,即使textarea扩展了。 (此网页不适用于支持多浏览器的网页,仅适用于Firefox。)

    <style>
        body{
            background: url(bg.jpg);
            background-size: cover;}
        textarea{
            display: block;
            margin-left: auto;
            margin-right: auto;
            background-color: black;
            border-radius: 12px;
            color: #ffffff;
            font-family:"Courier New", Courier, monospace;
            font-size: 16px;
            text-decoration: none;
            cursor: poiner;
            border: none;}
        button{
            background-color: #000000;
            border-radius: 12px;
            font-family: "Times New Roman", Times, serif;
            font-size: 24px;
            text-decoration: none;
            cursor: poiner;
            border: none;}
        button:hover{
            border: none;
            background: #5B93F5;}
        footer{
            position: absolute;
            bottom: 0px;
            right: 0px;
            text-align: right;
            color: #FFFFFF;}                
    </style>
</head>

<body>
    <div id="searchContainer">
        <form id="searchForm" name="searchForm" onsubmit="onSearchSubmit(event)">
                    <button id="searchSubmit" type="submit" value="Search" title="Google Search">
                        <font color="blue">G</font><font color="red">o</font><font color="yellow">o</font><font color="blue">g</font><font color="green">l</font><font color="red">e</font>
                    </button>
            <textarea id="searchText" type="text" name="q" maxlength="255" rows="3" cols="50" autocomplete="off" autofocus></textarea>
        </form>
    </div>
<footer>v5.0</footer>
</body>
</html>

2 个解决方案

#1

Add following in your css code:

在您的css代码中添加以下内容:

#searchContainer { text-align: center; }
#searchContainer > form { display: inline-block; text-align: left; }

it should resolve your issue.

它应该解决你的问题。

#2

For the code you have, you can add a padding to the container: JS Fiddle

对于你拥有的代码,你可以在容器中添加一个填充:JS Fiddle

Add this line to your CSS:

将此行添加到CSS:

#searchContainer{padding: 2em; display: inline-block;}

For a little more style if you want them connected, you can adjust some border-radius' and margins of the button and text area: JS Fiddle 2

如果你想要它们连接更多样式,你可以调整按钮和文本区域的一些边界半径和边距:JS小提琴2

#1