如何定位提交按钮？
[英]How to position the submit button?
问题描述
I'm looking to make an offline search page powered by Google. 
我正在寻找一个由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.) （此网页不是为支持多浏览器而设计的，它仅针对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
1 已采纳 2014-03-15 05:48:43
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
0 2014-03-15 02:02:51
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 Fiddle 2
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.