水平にレイアウトする方法は?

私がしなければならないことの例は、Techcrunchのホームページの上部に表示されています。これは次のようなクリック可能なアイテムの「HOT TOPIC」行です:

FOXCONN Google FACEBOOK DIASPORAのHOT TOPICSアプリアンドロイド未来

http://techcrunch.com/ を参照してください。

私は 'ul'タグと 'li'タグのCSSスタイルを調べましたが、CSSを使用してブラウザに「Mr.Browser」と言うことができる何も表示されません。ここには順序付けられていないリストがあります。 。ブラウザでは通常、ulのリストアイテムを垂直に積み重ねる代わりに、今回は 水平 のリストアイテムを表示してください。

私は、CSSの中で、

    を使ってリスト項目を水平にレイアウトするように指示することはできませんでした。

    Techcrunchページでこれを行うリストアされていないリストコード 'ul'があります:

    <div class="hot-topics-container">
    

    **Hot topics**

    </div>

    私はli floatを使ってみました。

    <head>
    
    </head>
    
    
    • http://localhost/mysite/someImage.png
    • This text needs to appear to the right of the 1st list item

    それをフォークアウトしました!ここで私は何をしなければならなかったのですか?私は李を全く浮かべませんでした。私はイメージを浮かせなければならなかったが、それは私を驚かせたが、うまくいけば動くだろう。ここにコードがあります。このコードでは、テキストである2番目のリスト項目は、イメージの最上部のエッジの最上部から始まるイメージのすぐ右に表示されます。

    <head>
      
    </head>
    
    
    • http://localhost/mysite/someImage.png
    • This text needs to appear to the right of the 1st list item
1

5 答え

ul {list-style:none} li {display:inline}

li needs to be display:inline or display:inline-block or float:left

2
追加された
こんにちはデイヴィッドとあなたに感謝し、実際に私は正しい方向に私を置くのを助けたすべての人に感謝 - 私は解決策を見つけた、上記のコードは - 浮動小数点の項目は動作しませんでした - 私は>画像(コードサンプルの一番下のコードを参照してください)。リストには私のイメージが表示され、すぐにテキストが表示されます。私が必要としていたものです。画像を浮かべる前に、さまざまなものを試してみる必要がありました。
追加された 著者 wantTheBest,
画像の幅が次のLI要素を押し下げているのか、それともAであるのかをチェックします
追加された 著者 David Nguyen,

リストを縦に表示させるCSSは次の場所にあります:

.module-header .hot-topics li {
  float: left;
}

Float is quite a difficult concept, I find it is best explained on A List Apart

リスト項目の箇条書きを隠すCSSは次のとおりです:

li {
  list-style: none;
}
2
追加された
+1ありがとうございましたBen - A List Apartの参考文献は本当に役に立ちます - このテキストを私のイメージの右側に表示することができれば幸いです。
追加された 著者 wantTheBest,

リストの各項目に float:left を適用する必要があります。

1
追加された

それを行うにはいくつかの方法があります。 li {display:inline-block} の設定は1です。 li {float:left;} は別のものです。

1
追加された

申請中:

#menu-hot-topic-menu li { display: inline; }

リストを水平にする

1
追加された
+1非常に便利です!ありがとう。
追加された 著者 wantTheBest,