Question

我需要在全宽button旁边放置一个固定宽度input，所以它们一起是全宽的。我该怎么做？

<div>
  <input placeholder="example">
  <button>></button>
</div>

<style>
    div {height: 30px}
    div > * {height: 100%}

    input {width: 100%}
    button {width: 30px}
</style>

Fiddle

Answer 1

Flexbox 可以做到这一点。

    div {
      height: 30px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
      width: 80%;
      margin: 5em auto;
      border:1px solid grey;
    }

    input {
      -webkit-box-flex:1;
      -webkit-flex:1;
          -ms-flex:1;
              flex:1;
    }
    
    button {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 30px;
          -ms-flex: 0 0 30px;
              flex: 0 0 30px
    }

<div>
  <input placeholder="example">
  <button>></button>
</div>

绝对定位

div {
  height: 30px;
  position: relative;
  margin-top:5em;
  padding-right: 30px;
  /* width of button */
}
div > * {
  height: 100%;
  box-sizing: border-box;
}
input {
  width: 100%
}
button {
  width: 30px;
  position: absolute;
  top: 0;
  right: 0;
}

<div>
  <input placeholder="example">
  <button>></button>
</div>

Answer 2

虽然推荐使用Paulie_D flexbox解决方案，但如果您需要在低于5S的iPhone上运行代码，则可以使用此block-model旧版解决方案：

＆＃13;

 div {
   height: 30px;
   margin: 0;
   padding: 0;
 }
 div > * {
   height: 100%;
   display: inline-block;
   box-sizing: border-box;
   margin: 0;
 }
 input {
   width: calc(100% - 30px);
 }
 button {
   width: 30px;
   float: right;
 }

＆＃13;

<div>
  <input placeholder="example">
  <button>></button>
</div>

＆＃13;

请注意，此示例中使用的选择器太宽泛，无法在生产环境中使用。您需要使它们更具体，因此它们不会影响不需要的元素。

输入旁边的按钮

2 个答案: