divの側にulリストの箇条書きを表示

Question

各要素内に段落を含むdivのリストがあります。私はそれを順序のないリストとして扱い、各divの左側にカスタム弾を表示したいと思います。しかし、私はdivの上に弾丸を取得します。

The fiddleは私の問題と私が見たいものを示しています。

これは、このhtml構造では達成できない場合は、私はいくつかの他の提案を聞いてうれしいです。そのため

Answer 1

あなたは絶対位置でこれを行うことができますが、私は一般的に、もし、すべての可能な位置決めを避けることを好みます。

最終的に、私はちょうど直線のliタグと同じインデントにdivを設定して、+をフローティングしました。

ul { 
 
    width: 300px; 
 
    list-style: none; 
 
} 
 

 
li { 
 
    margin: 40px; 
 
    padding-left: 0px; 
 
} 
 

 
li > div { margin-left: 40px;} 
 

 
li:before { 
 
    content: "+"; 
 
    display: block; 
 
    float: left; 
 
    padding-right: 30px; 
 
}

<ul> 
 
    <li> 
 
     <div> 
 
     <p>This is out of place</p> 
 
     <span>some other thing that wants to be here</span> 
 
     </div> 
 
    </li> 
 
    <li>This works as intended</li> 
 
    </ul>

Answer 2

使用しposition:absolute：

ul { 
 
    width: 300px; 
 
    list-style: none; 
 
    padding:0; 
 
} 
 

 
li { 
 
    margin:0 0 40px; 
 
    padding-left: 30px; 
 
    position:relative; 
 
} 
 

 
li:before { 
 
    content: "+"; 
 
    padding-right: 30px; 
 
    display:inline-block; 
 
    position:absolute; 
 
    left:0; 
 
}

<ul> 
 
    <li> 
 
     <div> 
 
     <p>This is out of place</p> 
 
     <span>some other thing that wants to be here</span> 
 
     </div> 
 
    </li> 
 
    <li>This works as intended some other thing that wants to be here</li> 
 
    </ul> 
 

Answer 3

私は通常、CSSはどの<ul>または<ol>だけdivを使用せずに、以下のようなハックを使用します。

display: list-item; 
list-style-type: circle; 

div.list-div { 
 
    display: list-item; 
 
    margin-left: 1.3em; 
 
    list-style-type: circle; 
 
    background: #ccc; 
 
}

<div class="list-div"> 
 
    <p>This is out of place</p> 
 
    <span>some other thing that wants to be here</span> 
 
</div> 
 

 
<div class="list-div"> 
 
    <p>This is out of place</p> 
 
    <span>some other thing that wants to be here</span> 
 
</div>

Answer 4

li:before css宣言にfloat: left;を追加してください。 :beforeセレクタは、タグの内容の前に挿入するのではなく、タグの内容の前に挿入します。 http://www.w3schools.com/cssref/sel_before.asp。ブラウザの開発者ツールで要素を調べると、<li>タグの中に "+"が表示されます。

li:before { 
    content: "+"; 
    padding-right: 30px; 
    float: left; 
} 

Answer 5

私はScottに同意します。その浮動小数点オプションはより良いオプションであり、他の方法は配置でレイアウトを破りがちです。

li:beforeがそれを上に置いている理由をより詳しく知りたいのですが、技術的にはあなたの場合は、段落の前にしたいので、p:beforeは以下のように動作します。

ul { 
 
    width: 600px; 
 
    list-style: none; 
 
} 
 

 
li { 
 
    margin: 0px; 
 
    padding-left: 0px; 
 
} 
 

 
li > div { margin-left: 0px;} 
 

 
p:before { 
 
    content: "+"; 
 
    margin-left: -18px; 
 
    padding-right: 10px; 
 
}

<ul> 
 
    <li> 
 
     <div> 
 
     <p>I am a paragraph</p> 
 
     <span>That is why p:before works and not li:before</span> 
 
     </div> 
 
    </li> 
 
    <li>This works as intended</li> 
 
    </ul>