web-dev-qa-db-ja.com

<li> <ul>改行

ですから、私が助けを必要としているのは、<li>または<ul>の後に改行を削除する方法です。

これは私の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; }

これはhtmlです：

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

<ul id ="etc">が1つしかない場合はすべて正常に機能しますが、複数ある場合は、新しい行を作成して「スタック」します。スタックしないようにして、左に移動することは可能ですか。正しい？ありがとう

編集：

デモ：/ removed /

htmlcssnewline
8
user1352480

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

#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

16
Sampson

いくつかのCSSで

 <style type="text/css">
 #ranks li { display:block; float:left; }
</style>
  • コメントとして更新：display：block付き
7
Rob Sedgwick

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

1
Adam Sweeney

これは水平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;   
}

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

0
Peter Flannery

もう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;
}
0
Maarten

<li>デフォルトはdisplay:block;あなたがそれを与えるならばdisplay:inline;またはdiplay:inline-block;改行を削除する必要があります

0
barro32