我正在努力实现以下目标:
但我无法正确掌握背景。我创建了这个小提琴,所以您可以看到我所做的事情。 http://jsfiddle.net/dya9xh1e/
field {
font-family:arial, sans-serif;
border-color: #d9d9d9;
border-top:solid 1px #c0c0c0;
}
input.field{
width:140px;
}
.fieldwrapper{
background-color:#CCC;
width:500px;
height:180px;
}
有人可以为此提供建议吗?
最佳答案
https://jsfiddle.net/rp1m13kk/
在这里,你有类似照片
input { font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; background-color:#CCC; display: inline;}
input.field{width:140px;}
.fieldwrapper{
background-color:#FFF;
width:1000px;
height:80px;
border: 2px solid #CCC
}
#findbutton{background-color:red;}
您有几个错误,例如在CSS的第一行中,您需要添加
.
来引用该类。我的解决方案是通过input
选择器进行更改。然后,我添加了
display:inline-block
属性以使组件内联。但是您需要更改容器大小,以适合总输入宽度,这就是为什么我放1000px
关于html - CSS:如何在同一行中将表单输入字段和按钮彼此相邻放置?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32607148/