我有以下网页:
HTML
<div class="center-both">
<table>
<tr>
<td></td>
<td>
<img src="http://placehold.it/246x105">
</td>
<td></td>
</tr>
<tr>
<td>
<img src="http://placehold.it/128x128">
</td>
<td>
<img src="http://placehold.it/640x390">
</td>
<td>
<img src="http://placehold.it/128x128">
</td>
</tr>
<tr>
<td></td>
<td>
<div class="input-group">
<input id="video-url" type="text" class="form-control" value="some_text">
<div class="input-group-btn">
<button id="copy-clipboard" type="button" class="btn btn-default">
<i class="glyphicon glyphicon-copy"></i>
</button>
</div>
</div>
</td>
<td></td>
</tr>
</table>
</div>
CSS
.center-both {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-webkit-filter: blur(0);
}
.center-both img {
display: block;
margin: auto;
}
(JSFiddle 链接——https://jsfiddle.net/7rkrfj87/2/)
它在 Firefox 中看起来符合预期:
但是在 Chrome 中 input-group
并不适合整个 td
:
为什么?我究竟做错了什么?我怎样才能强制它适应整个 td
?
最佳答案
你可以添加 width: 100%
duh!
.input-group {
position: relative;
display: table;
border-collapse: separate;
width: 100%;
}
我已经在 Chrome、Firefox 中查看过了。
fiddle :https://jsfiddle.net/fLs7t1v8/
关于html - 输入组不适合 Chrome 中的整个 td 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34354517/