0
考慮下面的標記和CSS：inline-block的孩子自動寬度奇怪的行爲
.parent {
position: relative;
float: right;
width: 400px;
height: 35px;
padding: 0 4px;
margin: 7px 20px;
border: 1px solid #aaa;
border-radius: 5px;
cursor: text;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.child {
display: inline-block;
height: 100%;
min-width: 1px;
vertical-align: top;
background-color: rgba(255, 0, 0, 0.5);
}
.sub-child {
display: inline-table;
height: calc(100% - 8px);
background-color: #ddd;
line-height: 27px;
font-size: 0.9em;
padding: 0 7px;
margin: 4px 4px 4px 0;
border-radius: 25px;
}
.sub-child span {
display: table-cell;
vertical-align: middle;
}
.sub-child .img {
width: 20px;
background-color: blue;
}
.sub-child .name {
padding: 0 7px;
max-width: 100px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.sub-child .closebtn {
position: relative;
top: -1px;
color: #525353;
font-weight: bold;
font-size: 20px;
cursor: pointer;
}
.sub-child .closebtn:before {
content: "\00d7";
}
.sub-child .closebtn:hover {
color: #000;
}
.other-child {
display: inline-block;
height: 100%;
width: 100px;
background-color: rgba(0, 0, 0, 0.5);
}<div class="parent">
<div class="child">
<div class="sub-child">
<span class="img"></span>
<span class="name">TestClient</span>
<span class="closebtn"></span>
</div>
<div class="sub-child">
<span class="img"></span>
<span class="name">Biggle Boo</span>
<span class="closebtn"></span>
</div>
<div class="sub-child">
<span class="img"></span>
<span class="name">Ratty Tatty</span>
<span class="closebtn"></span>
</div>
<div class="sub-child">
<span class="img"></span>
<span class="name">Shig Wiggle Miggleson</span>
<span class="closebtn"></span>
</div>
</div>
<div class="other-child"></div>
</div>我創建了一個jsfiddle來說明我有這個問題。除非刪除了.img範圍，否則.child寬度不會自動擴展爲其內容的大小。看起來，爲表格單元元素指定固定寬度會改變容器的行爲。這是一個錯誤？