0

こんにちは、このコンテンツを<li>タグに追加していますが、下に次々と表示されます。しかし、このように 1 行で表示したいのです...

    ホーム 私たちについて お問い合わせ 私たちのサービス

ここに私のhtmlがあります

<ul class="ddbar" id="ddbar">
<li class="topmenu" menu_id="0" style="padding: 0em 44.0714px;">
<a href="http://localhost" class="baritem">Home</a>
</li><li class="topmenu" menu_id="1" style="padding: 0em 15.0714px;">
<a href="#" class="baritem">Communities</a>
</li><li class="topmenu" menu_id="2" style="padding: 0em 8.57143px;">
<a href="#" class="baritem">Gallery</a>
</li><li class="topmenu" menu_id="3" style="padding: 0em 32.0714px;">
<a href="#" class="baritem">Bash</a>
</li><li class="topmenu" menu_id="4" style="padding: 0em 0.0714286px;">
<a href="#" class="baritem">Videos</a>
</li><li class="topmenu" menu_id="5" style="padding: 0em 18.0714px;">
<a href="#" class="baritem">Services</a>
</li><li class="topmenu" menu_id="6" style="padding: 0em 6.07143px;">
<a href="#" class="baritem">Create account</a>
</li>
</ul>
4

8 に答える 8

4

リスト要素を同じ行に配置するには、それらのdisplayプロパティを変更する必要があります。また、箇条書きボタンのレンダリングを避けたい場合もあります。この場合list-style、ルート リスト要素の をに設定する必要がありますnone。

ul#ddbar {
  list-style: none;
}

ul#ddbar li {
  display: inline-block;
  
  padding: 4px 10px;
  background-color: #EEE;
  border-radius: 5px;
}
<ul id="ddbar">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

于 2013-05-23T10:09:22.247 に答える
2

display: inline-block;要素を並べたい場合は使用する必要がありますliが、一方で、次のこともできます。float: left;

liコードを少しリファクタリングすることに興味がある場合は、それぞれのクラスを呼び出して、aこれらの要素を次のようにターゲットにできます。

ul.ddbar li {
   /* Styles */
}

ul.ddbar li a {
   /* Styles */
}

このように、すべてのクラスは要素の各タイプで同じであるため、各要素でクラスを呼び出す必要はありません

注: この属性に関する限り、これmenu_id="2"は無効なマークアップです。あなたのコードは動的に生成され、あまり保持していないと思います > 保持している場合は、インライン スタイルを削除することも検討してください。要素の id を使用すると、ul実際にはクラスを呼び出す必要はありません。使用しul#ddbar {}ても同じ結果が得られます

デモ（inline-block例）

デモ（float例）

于 2013-05-23T10:10:06.083 に答える
1

LI に float left を与える:

#ddbar li{
           float:left;
          }
于 2013-05-23T10:11:23.003 に答える
1 
ul#ddbar {
    list-style: none;
}
ul#ddbar li {
    display: inline-block;
    float: left;
}

ライブ デモはhttp://jsfiddle.net/6EZaQ/で見ることができます。

于 2013-05-23T10:12:17.653 に答える
0

これを追加するだけで、目的に役立ちます:-

 #ddbar li {
 float:left; 
 }
于 2013-05-23T10:18:10.763 に答える