我正在努力实现以下目标:

html - CSS:如何在同一行中将表单输入字段和按钮彼此相邻放置?-LMLPHP

但我无法正确掌握背景。我创建了这个小提琴,所以您可以看到我所做的事情。 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/

10-13 04:25