Question

我正在尝试将输入字段和提交按钮拉伸到同一行的屏幕上。基本上所以提交按钮不会低于输入字段。甚至不确定我是否需要添加额外的。我知道我已经看到了一种方法来获得一个响应式输入字段并使用display：table-cell提交按钮，但我最近找不到它。任何帮助，将不胜感激。

**编辑

我补充说：margin-left：-8px;提交按钮，这就是诀窍。不确定是否有更好的方法，但这是有效的。任何其他方式也将受到赞赏。

#div1{
  display:table;
  width:100%;
}
#div2{
  display:table-cell;
  
}
input[type="email"].form-control {
    width: 80%;
    padding: 0px;
    margin: 0px;
}
input[type="submit"].btn.btn-primary {
    width: 20%;
    padding: 0px;
    margin: 0px;
    margin-left: -8px;
}

<div id="div1">
        <div id="div2">
           <input type="email" name="EMAIL" class="form-control" 
            placeholder="Enter your E-mail Address">
           <input type="submit" value="Subscribe" class="btn btn-primary">
        </div>
     </div>

Answer 1

您是否正在尝试使用display：table-cell？

来实现这样的目标

<div id="div2">
    <input type="email" name="EMAIL" class="form-control" 
    placeholder="Enter your E-mail Address">
    <input type="submit" value="Subscribe" class="btn btn-primary">

* {
box-sizing: border-box;
}

#div2 {
  display: table;
  width: 100%;
}

#div2 > * {
  display: table-cell;
}

   #div2 > input[type='email'] {
  width: 80%;
}

#div2 > input[type='submit'] {
  width: 20%;
}

关键是盒子大小：border-box;你可以只为你想要的元素写它

https://jsfiddle.net/uw4u6ta5/3/

Answer 2

两者之间的换行在页面上创建了一个空格。您必须删除换行符，或使用此技巧：

<input type="email" name="EMAIL" class="form-control" placeholder="Enter your E-mail Address"><!--
--><input type="submit" value="Subscribe" class="btn btn-primary">

此外，您必须删除边框，因为它具有2px边框，因此它的宽度为20％+ 80％+ 2px + 2px + 2px + 2px（左右两个输入）使用

border:0;

请检查此更新jsfiddle 查看此帖子remove spaces between inputs

Answer 3

你真的不需要两个div包装你的输入。你需要将div设置为white-space：nowrap;保持你的输入在一条线上。只需将输入设置为宽度：50％;或者您可以选择专门针对每个输入的任何其他组合。

 #div2 {
         display: block;
         margin: 0 auto;
         width: 100%;
         white-space: nowrap;
    }

input {
        display: inline-block;
        width: 50%;
    }

如果您希望输入为80％且按钮为20％，则需要将其与您的班级单独定位。

.form-control {
             display: inline-block;
             width: 80%;
             margin: 0;
             padding: 0;
        }

 .btn-primary {
             width: 20%;
             margin: 0 auto;
             padding: 0;
 }

（JSFiddle）已更新

响应式输入字段和使用display：table-cell的提交按钮

3 个答案: