Question

我有一个简单的问题，但我尝试的解决方案不起作用。我的表单中有两列布局。此外，右列分为两列。左边是固定宽度（标签），右边是输入。我想在同一行输入和标签，输入字段尽可能填充剩余的可用空间。请看小提琴，让我知道我错过了什么。

<div style="float: left; width: 45%">
  <div id="keepTogether">
    <div id="label">
      Description
    </div>
    <div id="rightColumn">
      <input id="inputfield" />    
    </div>

  </div>
</div>

#keepTogether {
  height: 24px;
  margin-bottom: 8px;
  margin-top: 0px;
}

#Label {
  width: 100px;
  float: left;
  display: inline-block;
}

#inputfield {
  float: right;
  width: 100%;
}

#rightColumn {
  width: auto;
}

https://jsfiddle.net/workmonitored/4m0sj1fq/4/#&togetherjs=j3i2Q105hF

Answer 1

希望这对你有用。

#keepTogether {
        height: 24px;
        margin-bottom: 8px;
        margin-top: 0px;
    }

    #Label {
        width: 20%;
        float: left;
        display: inline-block;
    }

    #inputfield {
        float: right;
        width: 100%;
    }

    #rightColumn {
        width: 80% !important;
        width: auto;
        float: left;
    }

Answer 2

选项1使用display flex

<强>段

＆＃13;

#main{
 float: left;
 width:60% ;
   display:flex;
   border:solid;
}
#keepTogether {
  border:solid;
}

#label {
  display: inline;
  flex: 0 0 100px;
}

#inputfield {
      -webkit-box-flex:1;
      -webkit-flex:1;
          -ms-flex:1;
              flex:1;
  
}

＆＃13;

<div id='main'>
    <div id="label">
      Description
    </div>
      <input id="inputfield" />    
</div>

＆＃13;

使用表格标签的选项2

这是一个片段

＆＃13;

table{
  width:60%;
}
td {
  padding:0px;
  margin:0px;
}
#inputfield{
  width:100%;
  margin:none;
  padding:0;

}
#label{
  width:50px;
}

＆＃13;

<table>
<tr id='main'>
      <td id="label">
      Description:</td>
    <td id="rightColumn">
       <input id="inputfield" />   
    </td>
  </tr>
  </table>

＆＃13;

Answer 3

我发现你的代码有些错误。
- 你的第一个div没有必要保留。
- 您的ID选择不正确。它应该是#label 你应该遵循这个代码结构和css来解决这个问题。

#keepTogether {
  display: inline-block;
}

#label {
  float: left;
  padding-right: 10px;
}

#inputfield {
  width: 200px;
}

  <div id="keepTogether">
    <div id="label">
      Description
    </div>
    <input id="inputfield" />
  </div>

html输入元素扩展到全宽

3 个答案: