0

リストをインラインで表示する方法........今は垂直方向に配置されていますが、水平方向に配置できますか....下に私のフィドルリンクを提供してください....

http://jsfiddle.net/JNyQU/1/

<ul class="homePageLists" style="">
                            <li style="padding-bottom: 5px; list-style: none; ">
                              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                                Menu
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; ">
                              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                              Search
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; ">
                              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                              Create PN
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; ">
                              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                              Product List
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; ">
                              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                              Create PN
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; ">
                              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                              Create PN
                            </li>
                        </ul>
4

2 に答える 2

1

使用float:left;:

ul { clear: left; } // clear logo img
li { float: left; }

例http://jsfiddle.net/JNyQU/4/

于 2013-02-11T19:53:48.300 に答える
0

jFiddle が含まれています。

http://jsfiddle.net/persianturtle/JNyQU/6/

解決策は、順序付けられていないメニュー リストのコンテナにクラスを追加することでした。これを「インライン」と呼びました。

CSS は次のとおりです。

.inline ul {
  float:left;
  display:inline;
}

.inline ul li {
  float:left;
  display:inline;
}

私が変更した唯一のHTMLは次のとおりです。

<div class="inline">

これがお役に立てば幸いです！もしそうなら、チェックマークを忘れないでください！

また、見栄えが良くなるように、左に余白を追加しました。好きなように変更できます。

于 2013-02-11T19:55:35.117 に答える