Question

我想在同一行创建一个包含文本输入和按钮输入的div。

div的宽度将由我设定。这两个输入必须以按钮输入的宽度由其值设置的方式填充div，并且其余空间由文本输入填充。

我想要类似的东西：

<div style="width: 300px; background-color: orange">
    <input type="text" />
    <input type="button" value="Save" />
</div>

enter image description here

抱歉我的英语不好。

Answer 1

演示：http://jsfiddle.net/abhitalks/Y64ny/

您需要将文字input包装在另一个 div 中。将display:table应用于容器 div ，将display:table-cell和width:100%应用于包装 div 。

HTML：

<div style="width: 300px; background-color: orange">
    <div class="t"> <!-- This is the wrapper div around the text input -->
        <input type="text" />
    </div>
    <input type="button" value="Save" />
</div>

CSS ：

div { display: table; }
div.t {
    display: table-cell;
    width: 100%;
}
div.t > input {
    width: 100%;
}

更新：

正如Op（@ChocapicSz）在下面的评论中所述，添加box-sizing:border-box将修复填充。

更新了小提琴：http://jsfiddle.net/abhitalks/Y64ny/1/

Answer 2

<style>

.f-lft {
    float:left;
    border:2px solid orange;
 }

</style>

<body>
<div style="width: 300px;">
  <div> 
    <input class="f-lft"type="text" style="width:80%"/>
    <input class="f-lft" type="button" value="Save"/> 
 </div>
</div>
</body>

我为你添加了一个小提琴http://jsfiddle.net/GLAee/

我做了一个。保持你更好的练习。

编辑：以百分比

添加文本字段的宽度

Answer 3

使用绝对位置和轻微重构css可能对你有用。

同样使用<button>代替<input type="button">会让生活变得更容易。

我在codepen创建了一个示例供您查看。

<强> HTML：

<div class="container" style="width: 300px">
  <input type="text" class="text_input" />
  <button value="Save" class="btn">CLICK</button>
</div>

<div class="container" style="width: 500px">
  <input type="text" class="text_input" />
  <button value="Save" class="btn">CLICK</button>
</div>

<div class="container" style="width: 200px">
  <input type="text" class="text_input" />
  <button value="Save" class="btn">CLICK</button>
</div>

<强> CSS：

.container {
  position: relative;
  border: 3px solid orange;
  height: 50px;
  overflow: hidden;
  margin-bottom: 10px;
}

.text_input {
  height: 44px;
  width: 60%;
  padding: 0;
  line-height: 30px;
  font-size: 20px;
  padding: 0;
  margin: 3px;
  margin-left: 20px;
  border: none;
}
.text_input:focus {
  outline: none;
}

.btn {
  position: absolute; 
  height: 50px;
  line-height: 50px;
  right: 0;
  top: 0;
  margin: 0;
  padding: 0;
  background: orange;
  color: white;
  border: none;
  width: 30%;
  font-weight: bold;
}

.btn:hover {
  color: black;
  cursor: pointer;
}

给你这个：

enter image description here

请参阅codepen

Answer 4

http://jsfiddle.net/8FC2t/

    <div>
    <input type="text"  class='save'/>
    <input type="button" value="Save" />
</div>
<br>
<div>
    <input type="text" class='dns' />
    <input type="button" value="Do not Save" />
</div>



div{
    width:200px;
    background-color:orange;

}
.dns{
    width:calc(100% - 105px)
}
.save{
    width:calc(100% - 65px)
}
div>input[type='button']{
  float:right;
}

文本输入和按钮输入在同一行

4 个答案: