如何防止宽度为 100% 的输入溢出？

Question

我有问题。

我有一组像表格一样显示的 div，它有一行和 3 列。

当这些 div 达到 768px 的最大宽度时，它们会响应，第一列将被隐藏，第二列和第三列将保留并有输入文本。该输入文本将具有一个标签，并且该标签将显示为内联文本。

我的问题是输入的 css 为 100%，但输入的文本超出了表格之外。

这是代码

/* DivTable.com */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

 
@media (max-width: 768px) {
      .hide1 {
        display:none;
      }
      
      .force-display {
        display:block;
      }
      
      .forcew {
        white-space:nowrap;
      }
  }

<div class="divTable" style="width: 100%;border: 1px solid #000;" >
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell hide1"><p class="f-bold override" style="">First Name:</p></div>
  <div class="divTableCell force-display">  
    <div class="forcew">
          <label>First Name:</label>
         <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
    </div>

  </div>
  <div class="divTableCell force-display">  
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
    </div>
</div>
</div>
</div>

这是小提琴： https://jsfiddle.net/bt6hrc4h/

Answer 1

如果flexbox 是一个选项，一个简单的修复 就是让您的forcew 成为flexbox - 将此添加到您的样式中：

.forcew {
  display: flex;
  align-items: center;
}

请看下面的演示：

/* DivTable.com */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.divTable {
  display: table;
  width: 100%;
}
.divTableRow {
  display: table-row;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}
.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}
.form-control {
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.forcew {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .hide1 {
    display: none;
  }
  .force-display {
    display: block;
  }
  .forcew {
    white-space: nowrap;
  }
}

<div class="divTable" style="width: 100%;border: 1px solid #000;">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell hide1">
        <p class="f-bold override" style="">First Name:</p>
      </div>
      <div class="divTableCell force-display">
        <div class="forcew">
          <label>First Name:</label>
          <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
        </div>

      </div>
      <div class="divTableCell force-display">
        <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
      </div>
    </div>
  </div>
</div>

Answer 2

您应该使用calc() 函数计算第一个输入文本的宽度；

.forcew input {
    width: calc(100% - 80px);
} 

/* DivTable.com */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.forcew input {
    width: calc(100% - 80px);
}

 
@media (max-width: 768px) {
      .hide1 {
        display:none;
      }
      
      .force-display {
        display:block;
      }
      
      .forcew {
        white-space:nowrap;
      }
  }

<div class="divTable" style="width: 100%;border: 1px solid #000;" >
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell hide1"><p class="f-bold override" style="">First Name:</p></div>
  <div class="divTableCell force-display">  
    <div class="forcew">
          <label>First Name:</label>
         <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
    </div>

  </div>
  <div class="divTableCell force-display">  
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
    </div>
</div>
</div>
</div>

Answer 3

添加此值

.forcew {
    display: flex;
    align-items: center;
}