Question

有人可以指点我解决这个问题吗？

HTML

<div class="container">
    <input type="text" class="left" />
    <button class="right">Some button</button>
</div>

CSS

.container {
    display: table;
    width: 100%;
    background-color: red;
}

.left, .right {
   display: table-cell;
}

.right { width: 100px; }

以下是代码笔示例：http://codepen.io/be-codified/pen/qdRRBY

输入字段应该是可伸缩的，按钮应该固定在右边。

提前谢谢。

//编辑

我不能使用表格标签，因为布局需要响应。

Answer 1

我的input宽度为calc(100% - 110px)，按钮为float:right，结果为the following。这就是你需要的吗？据我所知，您想要使用的输入类型不能被用户拉伸。

<强> CSS

.container {
  display: table;
  width: 100%;
  background-color: red;
}

.left, .right {
  display: table-cell;
}

.right { 
  width: 100px; 
  float: right;
}

input.left {
  width: calc(100% - 110px); //This makes sure the input area is as wide as possible, while also leaving space for the button. Play with the exact measurements to get what you need.
}

Answer 2

我建议您将表单元素放入<div>，因此不要更改其默认显示属性，然后根据需要将左侧输入框设置为100％宽度。

.container {
  display: table;
  width: 100%;
  background-color: red;
}
.left, .right {
  display: table-cell;
}
.right {
  width: 100px;
}
.left input {
  width: 100%;
  box-sizing: border-box;
}

<div class="container">
  <div class="left"><input type="text" /></div>
  <div class="right"><button>Some button</button></div>
</div>

实际上，左右两者都可以有动态宽度，因此右列总是根据按钮长度获得最小宽度。

.container {
  display: table;
  width: 100%;
  background-color: red;
}
.left, .right {
  display: table-cell;
  white-space: nowrap;
}
.left {
  width: 100%;
}
.left input {
  width: 100%;
  box-sizing: border-box;
}

<div class="container">
  <div class="left"><input type="text" /></div>
  <div class="right"><button>Some button</button></div>
</div>

Answer 3

这是完整的响应式解决方案。

HTML

   <div class="container">
        <div class="input-flied-box">
            <form>
                <input type="text" required="required" placeholder="Right Some thing" />
                <button type="submit" class="submit-button">Send</button>
            </form>
        </div>
    </div>

CSS

/* RESPONSIVE CSS */
.container{
    width: 100%;
}
.input-flied-box{
    width: 100%;
}
.input-flied-box input{
    padding: 6px 12px 6px 12px;
}
.submit-button{
    top: inherit;
    right: inherit;
    position: relative;
    margin-bottom: 15px;
}
@media (min-width: 768px){
.container{
    width: 750px;
}
.input-flied-box{
    width: 600px;
}
.input-flied-box input{
    padding: 6px 101px 6px 12px;
}
.submit-button{
    top: 14px;
    right: 14px;
    position: absolute;
    margin-bottom: 0;
}
}
@media (min-width: 992px){
.container{
    width: 960px;
}
}
@media (min-width: 1200px){
.container{
    width: 1170px;
}
}
/* RESPONSIVE CSS END */

*:after,
*:before{
box-sizing: border-box;
}
*{
box-sizing: border-box;
}

.container:after,
.container:before{
display: table;
content: " ";
clear: both;
}
.container{
margin-left: auto;
margin-right: auto;
}
.input-flied-box {
background-color: #666666;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.input-flied-box input {
background-color: #ffffff;
border: 1px solid #cccccc;
height: 40px;
margin-bottom: 15px;
margin-top: 15px;
width: 100%;
border-radius: 4px;
}
.submit-button {
background-color: #fc3850;
border: medium none;
border-radius: 4px;
color: #ffffff;
font-family: Arial;
line-height: 1;
padding: 13px 30px;
text-transform: uppercase;
}

https://jsfiddle.net/bL3wgrv9/

CSS，两列 - 左边是动态宽度（输入），右边是固定（按钮）

3 个答案: