Question

我正在尝试将输入和按钮分组。基本上，按钮必须与输入在同一行，并且它们之间没有空格

因为我需要支持IE9，所以我使用display：table。

.container{
 border: 1px red solid;
 width: 35rem;
}

.input-group {
    border-collapse: separate;
    display: table;
    position: relative;
    }
    
.input {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    font-size: .875rem;
    line-height: 1.5;
    margin: 0 ;
    display: table-cell;
}    

.button {
    color: #fff;
    background-color: #0b0b0b;
    border: 0;
    padding: .375rem .75rem;
    text-align: center;
    }

<div class="container">
<div class="input-group">
        <input class="input">
        <button class="button">Get Data</button>
</div>
</div>

Answer 1

我不知道为什么输入中有width:100%。它将占用父空间的整个宽度。我已将其删除并开始工作。

请参见下面的代码段

.container{
    border: 1px red solid;
    width: 35rem;
}

.input-group {
    border-collapse: separate;
    display: table;
    position: relative;
    width:100%;
}
  

.input-group>div {
    display: table-cell;
}

.input-group>div:first-child {
    width: 100%;
} 
.input {
    position: relative;
    z-index: 2;
    width: 100%;
    font-size: .875rem;
    line-height: 1.5;
}

.button {
    color: #fff;
    background-color: #0b0b0b;
    border: 0;
    padding: .375rem .75rem;
    text-align: center;
    white-space: nowrap;
}

<div class="container">
<div class="input-group">
   <div><input class="input"></div>
   <div><button class="button">Get Data Dummy Text</button></div>
</div>
</div>

更新1：

您可以使用calc计算输入文本的宽度。 Can I use?

更新2：

要在没有按钮宽度的情况下使其成为可能，您可能希望将输入和按钮都包装在div中。并将display:table-cell应用于两个div。

您可以here（根据@LGSon的回答）对其进行测试

Answer 2

尝试一下，我在按钮上添加了position: absolute，让我知道是否有帮助！

.button {
    color: #fff;
    background-color: #0b0b0b;
    border: 0;
    padding: .375rem .75rem;
    text-align: center;
    position: absolute; /*Added*/
    width: 100px; /*Added*/
    height: 27px; /*Added*/
}

您可以here

检查它

对输入和按钮进行分组

2 个答案: