このフォーラムhttp://python-forum.org/pythonforum/をご覧になった場合は、トピックと投稿のdivが持つボーダーが短いことに気付くでしょう。私はフォーラムを書いていて、横に並んでいなければならないブロックに問題があります(上記フォーラムの4人のように)。 4つのブロックを並んで配置して、私のフォーラムがそんなに短くないように助けてください。サイドバイサイドdivs
答えて
これは、あなたが要求している<dd>
要素のCSSスタイルです:
UL.topiclist DD
{
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 4px;
BORDER-LEFT: #ffffff 1px solid;
PADDING-TOP: 4px
}
横並びがFLOAT: left;
でそれを得るための重要な1。
短い縦線は、ちょうどborder-left
です。
あなたのフロートで 'display:inline'をお勧めします。 floatは暗黙的にブロックされているため、これは基本的に無視されます。これはIEのためのものです。そうしないと、ダブルマージンのバグが発生します。 http://www.positioniseverything.net/explorer/floatIndent.html – Funka
@awe:はい、短い縦線はボーダー左です。それは短いです。 –
@Sweetie:なぜそれが短いのか疑問に思うなら、 '
テーブルを使用する必要があります。
テーブルの使用が許可されるケースはほんのわずかです(セマンティックhtmlルールに従う場合)。これは1つです。フォーラムの概要、投稿数と閲覧数、最後のポスターなどは表形式のデータです。テーブルを使用することは安全で完全に容認されます。
<dl>要素は、このように使用することを意図していませんでした。
私もそう思います。ありがとう! –
次の2つのdiv要素が横並びになりたい場合は、インラインブロックを使用して試みることができる:
<style>
#div1, #div2 {
display: inline-block;
}
</style>
<div id="wrapper">
<div id="div1"></div>
<div id="div2"></div>
</div>
- 1. css浮動サイドバイサイドdivsの高さ100%
- 2. Sharelatexのサイドバイサイド
- 3. Herokuスケジューラのレーキタスクのサイドバイサイド
- 4. サイドバイサイド実行し、MSユニットテスト
- 5. matplotlibのサイドバイサイド円グラフのタイトル
- 6. ランダムサイズdivs
- 7. Expand divs
- 8. SourceTreeでサイドバイサイドの表示が可能
- 9. VS2008での64ビットデバッグビルドのサイドバイサイド設定エラー
- 10. サイドバイサイドのデータをリロードするUITableView
- 11. サイドバイサイドverticle managerのためのBlackberry verticleスクロール
- 12. Wordpressのadmin barの下でサイドバイサイドをマテリアライズ
- 13. ボディ内にサイドバイサイドdivを持つフレックスフローカラム
- 14. サイドバイサイドの混乱を追加する
- 15. 表示データベースから件のデータ(サイドバイサイド)
- 16. CSS - 反応的なサイドバイサイド画像
- 17. ブートストラップのフロートdivs
- 18. JQuery draggable divs
- 19. center my footer divs
- 20. angularjs-linked linked divs
- 21. layers/divsをクリック
- 22. Styling、Absolute Divs
- 23. divs with vertical line
- 24. 左の列divs
- 25. CSS - インラインdivsサイズ
- 26. サークルとDivs
- 27. Jquery slide divs
- 28. Androidでスクロールdivs
- 29. スワイパー隠しdivs
- 30. jQuery sliding divs
あなたは、いくつかのより詳細な情報を与えることができますか? いくつかの矢印が付いたスクリーンショットが役立つかもしれません。 私はちょうどあなたが短く言っているものを得られない。 – jantimon
これを見てくださいhttp://savepic.ru/834672.png –