div破祖宗div

Question

我對毫無疑問是一個非常簡單的CSS問題的掙扎感到非常愚蠢：一個突破祖先div的div。 See pic

我的HTML的結構是這樣的：

<div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 equalHeight author-card"> 
    <div class="usr-fav-cuisine-wrapper"> 
     <div class="usr-fav-cuisine-item">Chinese</div> 
     <div class="usr-fav-cuisine-item">Flemish</div> 
     <div class="usr-fav-cuisine-item">French</div> 
     <div class="usr-fav-cuisine-item">German</div> 
     <div class="usr-fav-cuisine-item">Italian</div> 
     <div class="usr-fav-cuisine-item">Japanese</div> 
    </div> 
</div> 

我的CSS：

.author-card { 
    overflow: hidden; 
} 
.usr-fav-cuisine-wrapper { 
    margin-left: 10px; 
    max-width: 80%; 
} 
.usr-fav-cuisine-item { 
    display: inline 

}

類的作者卡現在已經溢出隱藏，但就是無解當然，它只是隱藏起來，並沒有讓它的孩子跑到下一個路線。我也給了作者卡一個最大寬度，但沒有結果。我也認爲給父母一個最大寬度，並給項目本身一個內聯顯示會做到這一點，但顯然不是。

我使用引導子主題 - 我看到我使用的所有col-classes都有一個左浮動，但是當我在Chrome Inspector中取消勾選該框時，沒有任何更改。如果有人能指引我正確的方向，我會很感激。

在此先感謝！

Answer 1

爲什麼不使用overflow：hidden;在.usr-fav-cuisine-wrapper？ 但我當然意識到你需要看到div內的文字，也就是小孩div的文字，我回答了我自己的問題。 嘗試設置margin-right爲.usr-fav-cuisine-wrapper與左邊相同，並使用box-sizing:inherit;就可以了。 D，如果它有效，請讓我知道：D。

Answer 2

所以你應該真的使用display: inline-block;塊元素。另外請注意，您的display: inline之後沒有分號。

但是，這裏有另一種方法來使用標準引導類和稍微修改的DOM來反映它是一個列表。

的HTML

<div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 equalHeight author-card"> 
    <ul class="usr-fav-cuisine-wrapper list-inline"> 
     <li class="usr-fav-cuisine-item">Chinese</li> 
     <li class="usr-fav-cuisine-item">Flemish</li> 
     <li class="usr-fav-cuisine-item">French</li> 
     <li class="usr-fav-cuisine-item">German</li> 
     <li class="usr-fav-cuisine-item">Italian</li> 
     <li class="usr-fav-cuisine-item">Japanese</li> 
    </ul> 
</div> 

的CSS

.author-card { 
    /* overflow: hidden; No sure you'll need this line */ 
} 
.usr-fav-cuisine-wrapper { 
    margin-left: 10px; 
    max-width: 80%; 
    white-space: nowrap; 
    overflow: hidden; 
} 
.usr-fav-cuisine li { 
    /* More CSS here if needed /* 
} 

查找有關list-inline引導3直列東西here細節。