提交按钮不合作

时间:2011-04-06 21:21:18

标签: html css

我确信这是对我的完全疏忽,但我想在输入框的右边有一个按钮,我的html是:

    <input type="text" name="q" id="search" />
    <input type="submit" name="submit" id="submit" value="Go!" />

和css是:

    #main input {
      margin: 30px auto auto 130px ;
      positiom: absolute;
      font-size: 18px;
      background: #fff;
      border: 3px;
      padding: 6px;
      z-index: 3;  
      }
    #search {
      float: left;
      width: 550px;

    }
    #submit {
      width: 60px;  
   }
    #submit::-moz-focus-inner { 
       border: 0;
       padding: 0;
   }

Go!按钮只是位于提交框左侧的正下方,任何类型的边距调整都是徒劳的,它只是停留在那里。还尝试使位置绝对,按钮重叠。

Go!按钮将无法正确定位 - 它应该位于我输入框的右侧,但它会挂在它下面。

如何让它直接放在我的输入框右侧?

感谢您的帮助!

编辑:

html{
     background: url(images/bg5.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
}
#main{ 
    width: 875px; 
    height: 350px; 
    background: url(images/form3.png) 0 0 no-repeat; 
    margin:250px auto; 
    z-index: 1; 
  }

#main form { 
    width: 850px; 
    height: 191px; 
    background: url(images/logo3.png) 0 0 no-repeat; 
    margin: -165px auto auto -90px;
    position: absolute;
    z-index: 2; 
  }
#text {
    font-size: 30px;
    color: #ffffff;
    font-family: parisjetaime;
    margin: 189px auto auto 130px ;
    line-height: 30px;

}
#main input {
    margin: 30px auto auto 130px ;

    font-size: 18px;
    background: #fff;
    border: 3px;
    padding: 6px;
    z-index: 3;  
}
#search {
    width: 550px;
}
#submit {
       width: 60px;
    float: right;    
}
#submit::-moz-focus-inner { 
    border: 0;
    padding: 0;
}

3 个答案:

答案 0 :(得分:4)

不确定这是否是您的问题所在,但似乎从margin: 130px auto auto 200px ;取出#submit Go!按钮正确放置在搜索框的右侧。

演示: http://jsfiddle.net/3ykRD/

修改

解决方案:http://jsfiddle.net/H3gYM/1/

#main input属性覆盖了#submit属性 - 在这种情况下,边距就是Go!按钮被取代。放置!important取消覆盖,然后调整边距修复了问题。

答案 1 :(得分:0)

为什么绝对定位您的输入?这是一个略微修剪的代码,它们将彼此相邻。 float:left导致高度分离,因为它导致两个元素不再处于同一“行”

#main input {
   font-size: 18px;
   background: #fff;
   border: 3px;
   padding: 6px;
   z-index: 3;  
   }
#search {
   width: 550px;
}
#submit {
   width: 60px;
}
#submit::-moz-focus-inner {
    border: 0;
    padding: 0;
}

答案 2 :(得分:0)

我认为您想要的是将按钮恰好放在文本框右边,对吧?如果是这样你需要将输入按钮和文本框浮动到左边;

#textbox {
 float: left;
}


#submit {
  width: 60px;  
  float: left;

}

这总是对我有用:)让我知道它是否有效!