1

div 要素に問題があり、1 行で表示できません。

<div>
 <table>
  <tr>
   <td>hellow world</td>
  </tr>
 </table>
 <ul>
  <li>hi world</li>
 </ul>
</div>

ul の上に表示されているテーブルと、2 つの要素を 1 行に並べて表示したいと考えています。私は使用しようとしました：

div
{
   display:inline;
}

また ：

div
{
   display:block;
}

しかし、うまくいきませんでした。誰でもこれで私を助けることができますか??

4

5 に答える 5

5

tableと をul並べて表示したい場合は、たまたま入っているコンテナではなく、これらの 2 つの要素をターゲットにする必要があります。

同じ高さなら簡単に書くと

table {float:left; margin-right:40px}

トリックを行います。(リストはマージンを使用して箇条書きを表示することもできるため、マージンが必要になります。これを指定しないと、箇条書きがテーブル内に収まってしまいます。)

フィドルを見る

テーブルが高い場合は、後でフロートもクリアする必要があります。そうしないと、後続のコンテンツもテーブルの右側に配置される可能性があります。

div::after {content:''; display:block; clear:both}

更新されたフィドルを参照してください

于 2013-07-23T10:40:06.433 に答える
1

コンテンツをフローティング:

div
{
   float: left;
}
于 2013-07-23T10:38:35.313 に答える
0

あなたはただtable,ul{display: inline-block;} デモを使うことができます

于 2013-07-23T10:41:08.050 に答える
0

これを試して

    <div>
    <table style="float: left;">
        <tr>
            <td width="100">
                hellow world
            </td>
        </tr>
    </table>   <ul>
        <li>hi world</li>
    </ul>
</div>
于 2013-07-23T10:51:24.927 に答える
0

適用できますdisplay:inline-blockが、重要なのは、それを正しい要素に適用することです...

table, ul
{
   display:inline-block;
}

これが実際の例です

于 2013-07-23T10:37:35.147 に答える