順序付けられていないリストを使用して単純な家系図を描画できるようにする CSS のセットがあります。
これは、ul.tree が画面の幅よりも狭い限りうまく機能し、その時点で乱雑なラップが行われます。これを避けるために、私は以下を使用しました：
#treewrapper {
margin: 10px; padding: 20px; width: auto; white-space: nowrap; overflow-x: scroll; overflow-x: scroll;
}
#tree {width: 5000px;}
これは、ツリーが実際には #treewrapper の現在の幅よりも狭い場合でも、巨大な #tree 領域を取得することを意味します。
私の最初の考えは、ul 要素の幅を見つけて、ページがレンダリングされたら、javascript を使用して一致するように ul.tree の幅を変更することでしたが、ul の幅を見ると、#tree の幅からパディング。
#tree width を auto に設定すると、画面が狭い場合に単純に ul.tree がラップされます。
CSS (または JavaScript) で #tree を十分に広くする簡単な方法はありますか?
#tree を Auto に設定した実際の例は、http: //www.rjt.org.uk/m/example/index.html で見ることができます。