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 

}

クラスの作者・カードは、今オーバーフロー隠されていますが、それは何の解決策ではありませんもちろん、単に隠れてしまい、子供たちを次の行に走らせることはありません。私も著者のカードに最大幅を与えましたが、結果はありません。私はまた、親に最大幅を与えると思って、アイテム自体にインライン表示をしてもそれはやったでしょうが、明らかにそうではありません。

私はブートストラップのサブテーマを使用しています。使用しているすべてのクラスにfloat-leftがあることがわかりますが、Chrome Inspectorでそのボックスのチェックを外すと、何も変わりません。私は誰かが正しい方向に私を指すことができればそれを感謝します。

ありがとうございます！

Answer 1

なぜオーバーフローを使用しないでください：隠し; .usr-fav-cuisine-wrapperにありますか？ もちろん、私はあなたがdiv内のテキストを見る必要があることを理解しました。別名は子供divです。自分の質問に答えました。 の場合はmargin-rightを左手と同じに設定し、box-sizing:inherit;を使用してください。

動作している場合はお知らせください：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の詳細を検索します。