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

【问题标题】：Text input and button input in the same line文本输入和按钮输入在同一行
【发布时间】：2021-05-25 17:15:00
【问题描述】：

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

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

我想要类似的东西：

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

对不起，我的英语不好。

【问题讨论】：

这个答案可能会有所帮助：stackoverflow.com/questions/18961918/css-fill-remaining-width。问了几乎完全相同的问题。

标签： html css

【解决方案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/

【讨论】：

这是一个不错的解决方案。我的问题是，在我解决了这个问题之后，我必须在文本输入中添加一个填充，并且它在按钮输入下。一个非常好的解决方案是 box-sizing。 :)
@ChocapicSz：你是绝对正确的。我将其添加为答案的更新。谢谢。

【解决方案2】：

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;
}

【讨论】：

我不想设置按钮的宽度，我想根据里面的文本自动计算按钮的宽度。

【解决方案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;
}

给你这个：

看到它在codepen上工作

【讨论】：

我希望点击按钮在文本相同的情况下始终具有相同的宽度，但无论如何感谢！
您可以以像素为单位设置宽度，并且仍然以百分比形式输入 - 这意味着有时在输入端和按钮之间的右侧可能存在间隙，但因为我已经用不应该太明显的 css 去掉了“大纲”。你也可以用JS设置输入宽度来计算宽度。

【解决方案4】：

<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/

我做了一个。留给你更好的练习。

编辑：以百分比添加文本字段的宽度

【讨论】：