inline-block的孩子自動寬度奇怪的行爲

Question

考慮下面的標記和CSS：

.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寬度不會自動擴展爲其內容的大小。看起來，爲表格單元元素指定固定寬度會改變容器的行爲。這是一個錯誤？

Answer 1

好吧，我通過從.img表格單元格中刪除固定寬度並插入具有固定寬度的子元素來修復此問題。但是我仍然不確定爲什麼指定表格單元的固定寬度應該會破壞元素的自動寬度。

.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:before { 
 
    content: ""; 
 
    width: 20px; 
 
    height: 100%; 
 
    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>

fixed fiddle