Question

I have a div containing an input and an a element:

.wrapper {
  width: 300px;
  display: inline-block;
}
.custom-input {
  display: block;
  width: 100%;
}
.button {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  display: block;
}

<div class="wrapper">
  <input class="custom-input" type="text" />
  <a class="button"></a>
</div>

Here's a jsfiddle。

我希望我的输入和内联按钮。带按钮的输入始终具有100％的包装宽度。在某些情况下，我想删除按钮。然后输入具有100％宽度的包装div。

当我使用inline-flex作为包装时，它只是内联的。但我希望它能够在旧的浏览器（IE 8-9）上运行，并且我希望我的输入和我的元素始终具有100％宽度的包装。

我该怎么做？

Answer 1

在输入中使用width: 100%会使所有水平空间都可用，将按钮按到下面一行。

这应该有效：

.wrapper{
    width: 300px;
    display: inline-block;
}

.custom-input{
    display: inline-block;
}

.button{
    width: 20px;
    height: 20px;
    background-color: #ccc;
    display: inline-block;
}

这是更新的jsfiddle：http://jsfiddle.net/k6yhtf92/3/

Answer 2

尝试使用display: inline-block代替display:block

更新了css

.wrapper{
    width: 300px;
    display: block;
}

.custom-input{
    display: inline-block;    
}

.button{
    width: 20px;
    height: 20px;
    background-color: #ccc;
    display: inline-block;
}

如何进行<input />和<a> element inline in a </a> <div> <a>

2 个答案: