Question

嘿伙计们我正在尝试将我的提交按钮移动到输入字段，但它的任务不可能。我唯一可以做的就是位置：绝对或相对，当我改变分辨率时它看起来很可怕。

您可以在以下位置找到实时版本： 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>

所以请问有谁能为我解决这个问题吗？附：我认为它在不同的块或其他线上，因为我无法移动它，即使是高边距，涂抹值

Answer 1

您好问题是您在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;
}

Answer 2

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;
}

CSS - 搜索提交按钮移动到输入，任务不可能

2 个答案: