如何定位提交按鈕？
[英]How to position the submit button?
問題描述
我正在尋找一個由Google支持的離線搜索頁面。 我在使用搜索按鈕時遇到了一些麻煩，它似乎可以做任何它想做的事情。 我希望它相對左側的文本區域上方。 我希望它即使在擴展文本區域時也可以留在文本區域的那個角落。 （此網頁不是為支持多瀏覽器而設計的，它僅針對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
在您的CSS代碼中添加以下內容：
#searchContainer { text-align: center; }
#searchContainer > form { display: inline-block; text-align: left; }
它應該可以解決您的問題。
解決方案2
0 2014-03-15 02:02:51
對於您擁有的代碼，可以在容器中添加填充： JS Fiddle
將此行添加到您的CSS：
#searchContainer{padding: 2em; display: inline-block;}
如果需要連接它們，還可以使用一些樣式，可以調整按鈕和文本區域的邊框半徑和邊距： JS Fiddle 2
如何放置提交按鈕，HTML
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.