Question

我正在努力使input[type=text]的div适合InputDivMain中剩余空间的整个宽度。我不知道如何使InputDivTitle div只与其内容一样宽，而不是更多。在仅拟合其内容的宽度之后，我希望InputDiv填充剩余的间隙，使其内部的输入填充该div的100％。

这是我的HTML：

<div class='Segment'>
  <div class='DisplayTable InputDivMain' id='MainDiv_01'>
    <div class='DisplayTableCell InputDivTitle'>Search by ID</div>
    <div class='DisplayTableCell InputDiv'>
      <input class='w3-input' type='text'>
    </div>
  </div>
  <div>
    <input type="button" value="Search">
  </div>
</div>
<div class='Segment'>
  <div class='DisplayTable InputDivMain' id='MainDiv_02'>
    <div class='DisplayTableCell InputDivTitle'>Search by Number</div>
    <div class='DisplayTableCell InputDiv'>
      <input class='w3-input' type='text'>
    </div>
  </div>
  <div>
    <input type="button" value="Search">
  </div>
</div>

这是我的CSS：

.DisplayInline {
    display: inline-block;
}

.DisplayTableCell {
    display: table-cell;
  vertical-align: middle;
}

.DisplayTable {
    display: table;
}

.Segment {
    margin-bottom: 20px;
}

.InputDivMain {
    box-sizing: border-box;
    margin-bottom: 5px;
    border-bottom: 1px solid #009688;
    display: table;
    width: 100%;
}

.InputDivMain:hover {
    cursor: text;
}


.InputDiv {
    overflow: auto;
    border: 1px solid red;
    width: auto;
    box-sizing: border-box;
}

.InputDiv > input[type=text] {
    border-bottom: 0px;
    width: 100%;
}

.InputDiv > input[type="text"]:focus {
    outline: none;
}

.InputDivTitle {
    box-sizing: border-box;
    border: 1px solid green;
    color: #009688;
    font-size: 120%;
    padding-left: 5px;

}

input[type="button"] {
    width: 100%;;
}

请帮忙！

编辑：抱歉，我完全忘了添加我的JSFiddle链接。 https://jsfiddle.net/ytsvzyc6/

Answer 1

你应该把

float导致元素仅占用其内容
overflow: hidden;导致下一个内容占用剩余空间

.InputDivTitle{
  float: left;
}
.InputDiv{
  position: relative;
  overflow: hidden;
}

see JSFiddle

Answer 2

您可以将显示内容设置为内联块，以防止内容与内容相对应。

display: inline-block

How to make div not larger than its contents?

如何使div宽度仅适合其内容和下一个div来填充余数？

2 个答案: