css - 将输入和按钮分组

标签 css

<分区>

我正在尝试对输入和按钮进行分组。基本上按钮需要与输入在同一行，它们之间没有空格

因为需要支持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>

最佳答案

我不知道为什么 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 的回答)

关于css - 将输入和按钮分组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53268942/