提交按钮不合作
我相信这是我的一个完整的监督,但我有一个按钮,我想一个输入框的直接权利,我的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;
}
The Go!按钮直接位于提交框左侧的下方,任何类型的边距调整都是徒劳的,它只是停留在那里。还尝试使位置绝对和按钮重叠。
The 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;
}
不知道这是你的问题,但似乎采取了从#submit
转到margin: 130px auto auto 200px ;
!按钮正确放置在搜索框的右侧。
演示: http://jsfiddle.net/3ykRD/
编辑
解决方案:http://jsfiddle.net/H3gYM/1/
的#main input
性能进行了重写#submit特性 - 在这种情况下,利润率是什么让去!按钮被移动。放置!important取消覆盖,然后调整边距可解决问题。
为什么绝对放置您的输入?这是一个稍微修剪下来的代码,它们将使它们彼此相邻。该float:left
是引起高度DIS-联合,因为它会导致两种元素不再是在同一个“行”
#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;
}
嗯,仍然挂在输入栏下方 - 用我的其余样式编辑。 – Sapp 2011-04-06 21:44:35
我想你想要的是恰到好处放置按钮,文本框,右侧?如果是这样你需要浮动输入按钮和文本框左侧;
#textbox {
float: left;
}
#submit {
width: 60px;
float: left;
}
这总是为我工作:)让我知道它的工作!
从描述中不清楚实际问题是什么。 – Oded 2011-04-06 21:23:25
抱歉 - 去!按钮将无法正确定位 - 它应该位于我的输入框的右侧,但它会挂在它下面。 – Sapp 2011-04-06 21:27:17
看起来你已经有了答案,但是请注意,你在#main输入下拼写错误的“位置” - 这可能不会帮助任何东西;) – kjl 2011-04-06 21:30:27