css - CSS div ボーダーが表示されますが、透明です

Question

無地の div の左側と右側のみに境界線を適用しようとしています。ページを見ると、(div 幅を埋めるように設定されている) 内の要素が適切なピクセル数だけ移動しますが、境界線自体 (無地の色) が存在しないか、境界線自体が透明に見えます。単色の境界線を実際に表示するにはどうすればよいですか? CSS セグメントは次のとおりです。

#menu {
border-left: 10px solid #490707;
border-right: 10px solid #490707;
}

Answer 1

#menuフローティング子孫（リスト項目）があるために高さが「折りたたまれた」ため、境界線は表示されません..フロートが尊重されるように#menu追加することにより、子孫の新しいブロック書式設定コンテキストを確立できます。overflow: hidden;

http://jsfiddle.net/rtqAq/1/

最終的に、CSS Intrinsic & Extrinsic Sizing Module Level 3がブラウザーに採用されると、およびプロパティのcontain-floats値を使用できるようになるため、もう使用する必要はありません。min-heightmin-widthoverflow: hidden;

1. contain-floats

'min-content' と同等ですが、ブロック ボックスの範囲に適用された場合、ブロック内で発生し、同じブロック フォーマット コンテキストに参加するフロートのマージン ボックスを含めるのに十分な大きさになるように内部範囲を強制する点が異なります。ブロックの直接の内容。