JSFiddle は次のとおりです。
これが私が目指しているもののスクリーンショットです:
そして、私がブラウザで得ているもの:
主な違いは、実際の実装では、バーが含まれる div 要素の使用可能な幅を埋めないことです。配置すると: width:100%
、バーはコンテナーの幅に拡張されますが、テキストの下に下がります。両方の要素が左に浮かんでいるにもかかわらず。
助言がありますか?
JSFiddle は次のとおりです。
これが私が目指しているもののスクリーンショットです:
そして、私がブラウザで得ているもの:
主な違いは、実際の実装では、バーが含まれる div 要素の使用可能な幅を埋めないことです。配置すると: width:100%
、バーはコンテナーの幅に拡張されますが、テキストの下に下がります。両方の要素が左に浮かんでいるにもかかわらず。
助言がありますか?
このソリューションが役立つはずです: https://stackoverflow.com/a/1767270/1472586
基本的にバーから削除float: left
して追加します。それに応じて余白を調整する必要がある場合もあります (たとえば、見出しの右側のパディングがうまく機能する場合があります)。width
overflow: hidden