1
私は問題があります。幅が100％の入力がオーバーフローするのを防ぐにはどうすればよいですか？
私はテーブルのように表示するdivのセットを持っています。それは行と3つの列を持っています。
これらのdivは最大幅768pxに達すると反応し、1番目の列は非表示になり、2番目と3番目の列は残り、入力テキストが表示されます。その入力テキストにはラベルがあり、そのラベルはインラインテキストとして表示されます。
私の問題は、入力が100％のCSSを持っているが、入力のテキストが表の外側に張り付いていることです。
はここでフィドルコード
/* DivTable.com */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.divTable{
\t display: table;
\t width: 100%;
}
.divTableRow {
\t display: table-row;
}
.divTableHeading {
\t background-color: #EEE;
\t display: table-header-group;
}
.divTableCell, .divTableHead {
\t border: 1px solid #999999;
\t display: table-cell;
\t padding: 3px 10px;
}
.divTableHeading {
\t background-color: #EEE;
\t display: table-header-group;
\t font-weight: bold;
}
.divTableFoot {
\t background-color: #EEE;
\t display: table-footer-group;
\t font-weight: bold;
}
.divTableBody {
\t 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>います：あなたはcalc()機能を用いて、第1の入力テキストの幅を計算する必要があります https://jsfiddle.net/bt6hrc4h/
オーバーフロー隠されたとのdivでラップ値追加！ – Gacci