Question

我希望制作一个由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>

Answer 1

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

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

它可以解决您的问题。

Answer 2

对于您拥有的代码，您可以向容器添加填充：JS Fiddle

将此行添加到CSS：

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

如果您希望连接它们，可以使用更多样式，您可以调整一些边框半径＆＃39;按钮和文本区域的边距和边距：JS Fiddle 2

如何定位提交按钮？

2 个答案: