2017-04-10 8 views
0

mySQLデータベースから項目をエコーアウトしています。mySQL +リスト - フレックスボックスで水平に表示する方法

テーブルを使用して完全に動作しました。

フレックスボックスを使用しようとしていますが、テーブルは完全であるように見えますが、移動する方法ではありません。

私は各項目を順序付けられていないリストに入れています。

リストは行ごとに縦に表示され続け、ページ全体に表示することはできません。

誰も簡単なフレックスボックスリストコードを持っていますか?私がこれを動作させるまで、反応が窓から出ています!ここで

は、PHPからのサンプルです:

while($row = $results->fetch_array()) { 
     print '<section><ul class="flexcontainer"><li class="flexcontent"> 
       '.$row["ID"].' 
      </li>'; 
+0

をflexbox'はHTMLテーブルとして良いとして表形式のデータをできることができない(どちらかに意味されなかった) 'ので

希望、あなたが私たちの前にレンダリングされた結果を提供する必要があります良い解決策を提案することができます。参考までに、_tablesのようなものはありません。完璧に見えますが、行く方法ではありません。表はとても使いやすく、_upgrade_、CSS Gridを持っています。 – LGSon

+0

ああ、今日は[ * CSSテーブル**](https://www.w3.org/TR/CSS2/tables.html#table-display)。これは 'flexbox'アイテムまたは' inline-block'または....と変更することができますまあ、ほとんど何でも – LGSon

答えて

1

あなたはおそらくul(各項目)のスタイルでflex-direction: row;を探しているかのようですね。 参照:https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

言われているように、表はデータの表示には全く問題ありません。あなたはそれらを反応させることさえできます。あなたは何ができるかを確認するために、これを試してみてください:

table, tr, td { 
    display: block; 
} 

PS:あなたのコードが含まれませんので、誰もあなたがやって、何が間違っているしているかを推測することがありませんしてください。

+0

_あなたのコードを含めるようにして、だれもが_...を推測する必要はないので、なぜあなたはそれを推測していますか? – LGSon

+0

それは合理的な推測のように思えるので;) – Pharaoh

0

水平に表示するリストの項目について

メインの答えは、リストの要素ではなく、リスト項目そのものにフレックスプロパティを適用する必要があります。

あなたは含まれてい<ul><li>あなたのHTMLは次のようになり可能性がある場合:

<ul style="display: flex; flex-direction: row;"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

その他の注意事項

ページ全体の項目が表示されますが、につながる可能性自体に上に与えられたソリューション重複する項目。これは、例えば、justify-content: space-around;を使用して気を配り、周りに同じ量のスペースがあるすべてのアイテムを表示します。その他のオプションはhereです。

また、flex-wrap: wrap;を使用することをお勧めします。これにより、アイテムがコンテナの端に達したときに次の行に折り返されます。これはあなたの問題の世話をする:)

関連する問題