使按钮坚持输入标签

Question

我正在为我的页面设计一个布局，我有一个textarea和一个输入区域，可以克隆成多个，一切都运行正常，但我希望输入标签后的+按钮与输入标签即使屏幕大小调整大小，现在它们显示为2个不同的元素，当在小屏幕中查看时，它们显示在单独的行中。

这是我希望显示合并的html部分

<div class="pure-control-group">
<input type="text" name="url[]" class="pure-input-2-3">
<button type="button" class="pure-button button-add">+</button>
</div>

这是在小屏幕上观看时会发生什么

可以查看整页布局here。

Answer 1

调整大小时按钮与输入分离的原因是媒体查询中的显示属性。

当屏幕分辨率小于480px时，根据css输入元素显示属性从内联块更改为块

请参阅下面的css

@media only screen and (max-width: 480px) {
  .pure-form input:not([type]), .pure-form input[type=text], .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=color], .pure-form label {
    margin-bottom: .3em;
    display: block;
  }
}

将以下css添加到样式表

@media only screen and (max-width: 480px){
  .pure-form input[type=text]{
    display:inline-block;        
  }    
}

即使在调整大小

之后，此查询也会使其成为内联块