小さいアイコンを横に並べる方法_html/css_WEB-ITnose

下の写真のように小さなアイコンを横に並べるにはどうすればよいですか?

ディスカッションに返信 (解決策)

div の位置を制御してみます
一緒に配置したいアイコンの div をフローティングしてみてください
またはテーブル レイアウトを使用してみてください

div の位置を制御してみてください
配置したいアイコンの div をフローティングしてみてください一緒にアレンジしたいです
または、テーブルレイアウトを使用してみてください

テーブルを使用したくない場合は、コードを投稿して私に確認できますか

div背景を使用する場合、divは次のようになります フロートを追加するには: left

実際、この効果を実現するのは非常に簡単です。水平方向の div を配置し、幅と高さを制御し、img タグを使用して画像を div に配置するだけです。この効果は、単純に水平方向の div を配置し、幅と高さを制御し、img タグを使用して画像を div に配置するだけです

この場合、それぞれの小さなアイコンをファイルに作成する必要がありますよね?小さなアイコンをすべてファイルに入れたいです

4 階のemperor_v5 からの返信を引用します: 実際、この効果を実現するのは非常に簡単です。水平方向の div を配置し、幅と高さを制御し、 imgタグでdivに画像を置きます

この場合、小さいアイコンごとにファイル化する必要がありますよね？小さなアイコンをすべて 1 つのファイルに入れたいのですが

そうですね、一枚の写真を作るために各写真を切り取らなければなりません

汗をかき、言葉を失い、滝のように汗をかきます。

.rtf{background:url(allbgs.png) no-repeat 0px 0px;width:13px;padding-top:18px;}.txt{background:url(allbgs.png) no-repeat -13px 0px;width:13px;padding-top:18px;}.excel{background:url(allbgs.png) no-repeat -26px 0px;width:16px;padding-top:18px;}.word{background:url(allbgs.png) no-repeat -42px 0px;width:16px;padding-top:18px;}.pdf{background:url(allbgs.png) no-repeat -58px 0px;width:16px;padding-top:18px;}.ppt{background:url(allbgs.png) no-repeat -74px 0px;width:16px;padding-top:18px;}

        <div class="error">        <div class="word"></div>        <div class="rtf"></div>            MS Office文档<div class="excel"></div> ,docxppt,pptxxls,xlsxvsdpotppsrtf <br />PDF pdf<br />纯文本 txt        </div>

*{margin0;padding:0;}.demo_ico a{ display: block; float:left; height:16px; padding:5px 12px;line-height:16px;}.demo_ico i{width:16px;height:16px;background-image:url(http://img.my.csdn.net/uploads/201301/31/1359592718_8462.jpg); float:left; background-repeat:no-repeat;}.one i{ background-position:-139px -16px;}.two i{background-position:-218px -16px;}.threee i{background-position:-194px -40px;}.four i{background-position:-235px -40px;}.five i{background-position:-139px -112px;}.demo_ico span{ margin-left:8px;}

ここで定義されているものはすべて i の形式です で使用するにはどうすればよいですか?

写真をやり直さないと、位置に問題が発生します。

追加情報: すべての小さな画像を並べ替えることを意味します。

この場合、画像を分離する方がより実用的で、コードの作成と変更が簡単です:)

<div class="demo_ico">   <a href="" class="one"><i></i><span>第一个</span></a>   <a href="" class="two"><i></i><span>第二个</span></a>   <a href="" class="threee"><i></i><span>第三个</span></a>   <a href="" class="four"><i></i><span>第四个</span></a>   <a href="" class="five"><i></i><span>第五个</span></a></div>

画像をやり直さない限り、次の場合に問題が発生します。位置決めされていません。

小さな写真を大きな写真に自動で結合し、位置決めを生成するツールがあります。 上記のCSSは自動生成されます。