Question

当Button具有给定宽度（通过它的值）并且Parent div也具有给定宽度时，是否可以在TextBox旁边放置一个Button。最后，TextBox宽度+按钮宽度应该是父div的宽度。

TestExample：

#left
{
    float: left;
    width: 100%;
}
#right 
{
    width: auto;
}

<div>
    <input type="text" id="left"/>
    <input type="button" id="right" value="AnyText"/>
</div>

谢谢！

Answer 1

＆＃13;

form { display: flex; }
input[type=text] { flex-grow: 1; }

＆＃13;

<form>
  <input type="text">
  <input type="button" value="Button text">
</form>

＆＃13;

Answer 2

表也是我的想法..也许这会做你所希望的？

#right {
  width: 100%;
}
#left {
  width: 100%;
}
table {
  margin: 0 auto;
  padding: 0;
}

<table width="100%">
  <tr>
    <td>
      <input type="text" id="left" />
    </td>
    <td>
      <input type="button" id="right" value="AnyText" />
    </td>
  </tr>
</table>

Answer 3

您必须为parrent元素指定width属性才能将按钮宽度设置为100％。在你的情况下，如果你修改你的css如下，你将实现你想要的

div {
    width: 300px; }
#left {
    float: left;
    width: 100%; }
#right  {
    width: 100%; }

Answer 4

我考虑到了这一点。更多的自举设计。

.left {
    position: absolute;
    top: 10; right: 100px; left:5px; 
}
.right {
    float: right
}
.input-group {
    display: table;
position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
    display: inline-table;
    vertical-align: middle;
}
.input-group-btn{
    display: table-cell;
    width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.form-control{
    display: table-cell;
    width: 100%;
}


<div class="input-group">
      <input type="text" class="form-control" />
      <span class="input-group-btn">
        <input type="button" value="AnyText"/>
      </span>
    </div>

jsfiddle

将一个按钮放在TextBox总长度为100％的旁边

4 个答案: