联系表单提交按钮定位

Question

这是我的网站：

http://cvkj.agencialosnavegantes.cl/

我在页面底部有一个联系表单，我试图将提交按钮放在文本框旁边，但我很挣扎。

这是我最初的css：

＆＃13;

＆＃13;

#enviarbajo {
    background:url(http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/paper-plane-2.png) no-repeat;
    background-color: #564585;
    width:40px; 
    height:40px; 
    padding:0px 0 4px 0; 
    border:none; text-indent: -1000em; cursor:pointer;
    border-radius: 0;
    margin: 5%;
    position: relative;
    left: 35%;
   
}

＆＃13;

＆＃13;

＆＃13;

报告帖子 星期五下午01:00发布 你好

这是我的网站：

http://cvkj.agencialosnavegantes.cl/

我在页面底部有一个联系表单，我试图将提交按钮放在文本框旁边，但我很挣扎。

这是我最初的css：

enviarbajo {

background:url(http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/paper-plane-2.png) no-repeat;
background-color: #564585;
width:40px; 
height:40px; 
padding:0px 0 4px 0; 
border:none; text-indent: -1000em; cursor:pointer;
border-radius: 0;
margin: 5%;
position: relative;
left: 35%;

} 然后我尝试使用媒体查询定位按钮，但我无法将按钮放在我想要的地方

＆＃13;

＆＃13;

@media (max-width: 768px){
   #enviarbajo {
    position: relative;
    right: 100px;
    }
}

＆＃13;

＆＃13;

＆＃13;

下面的其他媒体查询：

＆＃13;

＆＃13;

@media only screen and (max-width: 500px) {
    #enviarbajo {
    position: relative;
    right: 50px;
    }

＆＃13;

＆＃13;

＆＃13;

有更有效的方法吗？

Answer 1

当您使用固定宽度按钮时，有2个不错的选项，而不是使用75％和25％宽度的div。 在两种解决方案中，使用40px作为按钮宽度。

第一解决方案

对于第一个div使用计算宽度：calc（100％ - 40px）

#footer-widgets form.wpcf7-form div:nth-child(2){
  width: calc(100% - 40px);
}
#footer-widgets form.wpcf7-form div:nth-child(2) > span{
  margin: 0;
}
#footer-widgets form.wpcf7-form div:nth-child(2) input{
  width: 100%;
}

#footer-widgets form.wpcf7-form div:nth-child(3){
  width: 40px;
}

第二种解决方案

使用填充（40px）和按钮的绝对定位

#footer-widgets form.wpcf7-form {
  position: relative;
}
#footer-widgets form.wpcf7-form div:nth-child(2){
  width: 100%;
  padding-right: 40px;
}
#footer-widgets form.wpcf7-form div:nth-child(2) > span{
  margin: 0;
}
#footer-widgets form.wpcf7-form div:nth-child(2) input{
  width: 100%;
}

#footer-widgets form.wpcf7-form div:nth-child(3){
  width: 40px;
  position: absolute;
  top:0;
  right: 0;
}

Answer 2

这是Lukasz Mazan提供的这个问题的明确答案

#footer-widgets form.wpcf7-form div:nth-child(2){
  width: calc(100% - 40px);
}
#footer-widgets form.wpcf7-form div:nth-child(2) > span{
  margin: 0;
}
#footer-widgets form.wpcf7-form div:nth-child(2) input{
  width: 100%;
}

#footer-widgets form.wpcf7-form div:nth-child(3){
  width: 40px;
}

使用此功能，您可以在每个屏幕尺寸的电子邮箱旁边显示提交按钮。

问题解决了。