CSS - 搜索提交按鈕移動到輸入，不可能完成的任務

嘿傢伙我試圖將我的提交按鈕移動到輸入字段，但它的任務不可能。我唯一能做的就是立場：絕對的或相對的，當我改變決議時，它看起來很可怕。CSS - 搜索提交按鈕移動到輸入，不可能完成的任務

你可以找到真人版： http://funedit.com/andurit/try1/

我的CSS：

body{ 
    margin: 0 auto; 
    padding: 0 auto; 
    background-image:url('images/background.png'); 
    background-repeat: no-repeat; 
    background-size 100%; 
    background-position: 50% 0; 
    margin: 0 auto; 
    font-size: 13px; 
    font-family: Arial; 
    min-width: 1160px;  
} 

.center { 
    width: 1030px; 
    margin: 0 auto; 
} 

#top-panel{ 
    background-image:url('images/top_panel.png'); 
    background-repeat: repeat-x; 
    position: fixed; 
    min-width: 1160px; 
    background-size: 100%; 
    width: 100%; 
    height: 48px; 
    line-height: 48px; 
    background-position: 50% 0; 
    padding: 0 auto; 
} 

#top-button{ 
    background-image:url('images/top_button.png'); 
    background-repeat: no-repeat; 
    display: inline-block; 
    width: 141px; 
    height: 38px; 
    margin: 5px auto 5px 20px; 
} 
#top-panel #text{ 
    color: #9c9c9c; 
    vertical-align:top; 
} 
#top-panel #text b{ 
    font-weight: bold; 
    vertical-align:top; 
} 
#top-panel #text2{ 
    color: #6ab1ed; 
    vertical-align:top; 
    white-space: nowrap; 
    margin-left: 50px;  /* Horny panel, medzera medzi textami */ 
} 
#top-panel #text3{ 
    color: #9c9c9c; 
    vertical-align:top; 
} 
#top-panel input{ 
    height: 22px; 
    line-height: 22px; 
    text-align: center; 
    vertical-align:top; 
    margin-top: 10px;   
} 
#top-panel #login-button{ 
    height: 27px; 
    width:81px; 
    display: inline-block; 
    margin-top: 9px; 
    margin-left: 2px; 
    vertical-align:top;   
} 
#warningimg{ 
    background-image: url("images/warning.png"); 
    background-repeat: no-repeat; 
    position: relative; 
    left: 720px; 
    top: 50px; 
    width: 37px; 
    height: 35px; 
} 
a #warning{ 
    color: #d4d4d4; 
    height:35px; 
    display: block; 
    text-align: right; 
    margin-top: 30px; 
    margin-right: 15px; 
    text-decoration:none; 
} 
#warning #underline{ 
    text-decoration:underline; 
} 
#container{ 
    width: 1027px; 
    height: 1456px; 
    background-color:#d4d4d4; 
    display:inline-block; 
} 
#logobg{ 
    background-image: url("images/logobg.png"); 
    background-repeat: repeat-x; 
    height:84px; 
    margin: 9px 22px; 
} 
#logo{ 
    background-image: url("images/logo.png"); 
    background-repeat: no-repeat; 
    width: 285px; 
    height: 74px; 
    display: inline-block; 
    margin: 5px 0 0 10px; 
    line-height: 74px;     
} 
#logobg input[type="text"]{ 
    width: 273px; 
    height: 39px; 
    line-height: 39px; 
    border: 2px; 
    border-color: #d4d4d4; 
    vertical-align:middle; 
    position: relative; 
    left: 350px; 
    bottom: 35px; 
    display: table-cell; 
} 
/* 
#search-submit{ 
    background-image: url("images/search_submit.png"); 
    background-repeat: no-repeat; 
    width:48px; 
    height: 41px; 
    display: inline-block; 
    margin-left: 900px; 
    margin-bottom: 10px; 
} 
*/ 
#logobg .search-submit input { 
    background:url(images/search_submit.png) no-repeat; 
    cursor:pointer; 
    width: 48px; 
    height: 41px; 
    border: none; 
    display:inline-block; 
    margin-left: 700px; 
    margin-bottom: 700px; 
}

HTML：

<body> 
<div id="top-panel"> 
    <div class="center"> 
    <a href="#"><span id="top-button"></span> </a> 
    <span id="text"> Právě hraje <b>5000</b> hráčů na <b>150</b> serverech</span> 
    <span id="text2"> Registruj se zdarma </span> <span id="text3"> nebo </span> 
    <input type="text"> 
    <input type="password"> 
    <a href="#"><span id="login-button"><img src="images/login_button.png"></span></a> 
    </div> 
</div> 
<div class="center"> 
    <div id="warningimg"></div> 
    <a href="#"><span id="warning"><span id="underline">NIGHT CUP 2014</span>- Sledujte přímý přenos</span></a> 
</div> 
<div class="center"> 
    <div id="container"> 
     <div id="logobg"> 
      <a href="#"<span id="logo"> </span></a> 
      <input type="text"> 
      <div class="search-submit"><INPUT type="submit" name="" value=""></div> 
     </div> 
</div> 
</div> 
</body>

所以，請在這裏任何人誰可以幫我？ p.s.我認爲它在不同的線路塊或東西，因爲我不能移動它甚至高利潤率，價值

來源

2014-04-05 user3009924

嗨，你的問題是，你有一個div提交。請問爲什麼你的文本輸入不在<form>？

試試這個css。

#logobg .search-submit input { 
     background: url("images/search_submit.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
     border: medium none; 
     cursor: pointer; 
     display: inline-block; 
     height: 41px; 
     line-height: 39px; 
     margin-right: 20px; 
     margin-top: 20px; 
     width: 48px; 
    } 


.search-submit { 
    display: inline; 
    float: right; 
}

來源

2014-04-05 17:38:10 DD0UG

This jsFiddle應該可以解決您的問題。我曾嘗試在幾個屏幕上重新調整大小，並保持在正確的位置。我改變了，並增加了一些如此的風格到search submit類。

#logobg .search-submit{ 
    width: 48px; 
    height: 41px; 
    display: inline-block; 
    margin-left: 350px; 
    margin-top: 20px; 
    position: absolute; 
} 
#logobg .search-submit input { 
background: url(http://funedit.com/andurit/try1/images/search_submit.png) no-repeat; 
cursor: pointer; 
width: 48px; 
height: 41px; 
border: none; 
}

來源

2014-04-05 17:42:45 Howli

CSS - 搜索提交按鈕移動到輸入，不可能完成的任務

回答

相關問題