8

So what I need help with, is how do I remove the newline after a <li> and or <ul>

This is my css:

    #ranks li {
    background: url(/img.png) no-repeat top left;
}
#ranks .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; } 
#ranks .sprite-banned{ background-position: -207px 0; width: 157px; height: 44px; }

and this is the html:

<ul id="ranks"><li class="sprite-admin"></li></ul>

It all works well while only one of the <ul id ="etc"> is there, but if there are multiple, it will make a new line and 'stack' them.. is it possible to make them not stack, and just go left to right? Thanks

EDIT:

Demo : /removed/

4

6 に答える 6

16

いくつかのオプションがあります:

#ranks li {
  float: left;
}

これにより、水平方向の画面スペースがなくなるまで、すべてのリスト項目が折り返されずに左にフロートされます。あるいは、

#ranks li {
  display: inline-block;
}

また、要素を並べて配置しますが、ブロック レベルの要素として処理します。ブロックレベルのスタイリングを気にしない場合は、ストレートなインライン表示を使用できます。

#ranks li {
  display: inline;
}

リスト項目を他のインライン要素 (<span>または など<a>) と同様に扱います。

リスト項目には、リストの親だけでなく、削除する必要がある固有のスタイルが他にもいくつかあります。margin、およびを必ずチェックしてくださいpadding。

デモ: http://jsbin.com/iconud/edit#html,live

先を見てください！

リスト アイテムを並べて配置すると、リスト アイテム間に見苦しいギャップが生じる場合があります。これは、インライン リストの一般的な問題です。解決策の 1 つは、リスト アイテムの終了タグと開始タグの間の改行スペースを削除することです。

<ul id="ranks"><li>
  Index</li><li>
  Contact</li><li>
  Portfolio</li>
</ul>

または、それらをすべてインラインにして、少し識別しにくくします。

<ul id="ranks">
  <li>Index</li><li>Contact</li><li>Portfolio</li>
</ul>

これは目に少し厳しいです。HTML では、終了タグは必ずしも必要ではないため、終了タグを省略することもできます (ただし、これには少し神経質になります)。

<ul id="ranks">
  <li>Index
  <li>Contact
  <li>Portfolio
</ul>

複数のリストもインラインに！

OPのコメントのいくつかから、リストアイテムをインラインで取得するだけでなく、リスト自体を取得しようとしているようです。その場合は、前述の同じルールをリスト自体に適用します。

#ranks,
#specs {
  margin: 0;
  padding: 0;
  display: inline-block;
}
#ranks li,
#specs li {
  display: inline-block;
  border: 1px solid #CCC;
  padding: 5px 10px;
}

ここでは、id を検索してからタグを検索するセレクターを使用して、2 つのルール セットを識別しました。共通のクラスをリストに適用するか、セレクターを共通の親要素に基づいて作成することで、これを簡素化できます。次はマークアップです。

<ul id="ranks">
  <li>Index</li>
  <li>Contact</li>
  <li>Portfolio</li>
</ul>

<ul id="specs">
  <li>Foo</li>
  <li>Bar</li>
</ul>

これにより、両方のリストとそのアイテムが水平方向に表示されます。

デモ: http://jsbin.com/iconud/2/edit

于 2012-05-17T20:14:53.460 に答える
7

いくつかのCSSで

 <style type="text/css">
 #ranks li { display:block; float:left; }
</style>
  • コメントとして更新: display:block を使用
于 2012-05-17T20:14:42.777 に答える
1

ul li{ display:inline;}トリックをしますか？

于 2012-05-17T20:14:49.500 に答える
0

これは水平ULの基本的な例です

HTML

<ul id="list">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>
<span class="clearFloats">

CSS

.item {
    float: left;
}

.clearFloats {
    clear: both;   
}

</ p>

JSFiddleの例：http ：//jsfiddle.net/peterf/DEUBf/

于 2012-05-17T20:22:00.407 に答える
0

<li>デフォルトではdisplay:block; 、それを指定するdisplay:inline;かdiplay:inline-block;、改行を削除する必要があります

于 2012-05-17T20:14:59.170 に答える
0

もう 1 つのオプションは、ul で font-size: 0 を設定してから、li タグで目的の font-size を復元することです。これは ul タグ内に含まれており、clear:both のような追加のハックを必要とせず、スタイリングの目的をよりよく説明しているため (リスト アイテム内にないものはすべて非表示にします)、私はこれを好みます。

ul {
    list-style-type: none;
    font-size: 0;
}
li {
    display: inline-block; /* Or inline, as you like */
    font-size: 16px;
}
于 2013-10-01T20:19:31.527 に答える