コンテナの外に番号/テキストを表示する方法

私のサイトにカスタム投稿のCSS/HTMLを追加して、リストの投稿（ベスト10のベストバケーションなど）に列の外にある番号を付ける。例えば、通常の代わりにコンテナの外に番号/テキストを表示する方法

| 1。ニューヨーク

| 2。フロリダ

| 3。ハワイ

私はそれが

1のようになりたい|ニューヨーク

2 |フロリダ

3 |ハワイ

数字を実際に大きくしたいが、テキストの書式を崩してはならない。

.list-number{ 
    display: block; 
    font-family: 'Merriweather'; 
    color: rgba(0,0,0,.7); 
    font-size: 5.5rem; 
    position: relative; 
    left: -15px; 
    width: 0; 
    overflow: visible; 
    z-index: 100000; 
}

そして、それは左に番号を移動し、その数は、すぐに姿を消した：私は、私はこのコードを試してみましたニューヨーク・タイムズ紙のような場所はなど、引用符、画像、と

これを行う見てきましたそれはコンテナから出て行った。それはまた、それがされていたスペースの段落の後ろに残った。私はこれを1時間ほど手直ししていましたが、何を変える必要があるのか分かりません。（これは私が通常に変更する@mediaクエリを計画し、モバイル用にリサイズされる。 - まだそこまでもらっていない）

出典

2017-01-09 jonbon

スタート 'のlist-style-位：外'。それが受け入れられれば、それは非常に速い変化です。それが微妙に違うようにしたいのであれば、もっと多くの作業が必要になります。 –

注文リストがある場合は、次のようなものを試してみてください。http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/ –

。

は、項目カウンタを使用し、私はあなたがこのような何かを探していると信じて::before擬似要素内のリスト項目の前に

li { 
 
    width: 150px; 
 
    background: orange; 
 
    display: block; 
 
    margin: 5px 0 5px 30px; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
} 
 
ul { 
 
    counter-reset: num; 
 
} 
 
li:before { 
 
    counter-increment: num; 
 
    content: counter(num); 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 20px; 
 
    margin: -5px 20px -5px -25px; 
 
    padding: 5px; 
 
    color: yellow; 
 
    background: green; 
 
    text-align: center; 
 
}

<ul> 
 
<li>item1</li> 
 
<li>item2</li> 
 
<li>item3</li> 
 
<li>item4</li> 
 
<li>item5</li> 
 
<li>item6</li> 
 
<li>item7</li> 
 
</ul>

出典

2017-01-09 15:06:54 Banzay

これは動作しますが、*私がposition：absoluteに変更した場合のみ*です。なぜ？私がポジションを取っているとき：相対;何も目に見えない – jonbon

iが二つの容器を作成している、ここで、この例に見てください親のdivと子のスパンと負の値と比較的左側にスパンを配置：カスタムカウンタを使用し、絶対にで弾丸を配置した場合

.parent{ 
 
    background-color:red; 
 
    width:200px; 
 
    height:200px; 
 
    margin-left:10px; 
 
    
 
} 
 
.child{ 
 
    position:relative; 
 
    left:-15px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="parent"> 
 
    <span class="child"> 
 
    1 Hello 
 
    </span> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-01-09 15:03:26

悲しいことに、これは良い解決策ではありません。 '：before'と'：after'疑似要素の学習を始める方が良い。 –

ありがとう、確かに彼らを勉強します –

あなたが好きしかし、あなたがこれをフォーマットすることができの要素：

あなたも順不同リストについては、この回答を使用することができます

.list-number li{ 
    position:relative; 
    counter-increment: counter; 
} 

.list-number li:before { 
    content: counter(counter); 
    position: absolute; 
    left: -80px; 
} 

.list-number{ 
    list-style:none; 
    display: block; 
    font-family: 'Merriweather'; 
    color: rgba(0,0,0,.7); 
    font-size: 5.5rem; 
    overflow: visible; 
    z-index: 100000; 
    padding: 0 0 0 100px; 
}

https://jsfiddle.net/bq7at1g1/

出典

2017-01-09 15:05:50

を置きます。非常に迅速かつ簡単で http://codepen.io/Elysium13/pen/qROpZN

body { 
    background-color:#f8f8f8; 
} 
.section-block{ 
    display:block; 
    padding:10px; 
    margin:0 25px 0 25px; 
    background-color:white; 
    border-bottom:1px solid #f8f8f8; 
} 
.section-block .list-no{ 
    position:absolute; 
    margin-left:-33px; 
    font-size:30px; 
    color:#5bc0de; 
} 
.section-block .list-title { 
    display:inline-block; 
    color:#aaa; 
    margin:0 0 5px 0; 
} 
.section-block .list-description { 
    margin-left:15px; 
    color:#111; 
} 

<!DOCTYPE html> 
<html> 
    <body> 
    <section class="section-block"> 
     <span class="list-no">1</span> 
     <h4 class="list-title">New York</h4> 
     <br> 
     <small class="list-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</small> 
    </section> 
    <section class="section-block"> 
     <span class="list-no">2</span> 
     <h4 class="list-title">Florida</h4> 
     <br> 
     <small class="list-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</small> 
    </section> 
    <section class="section-block"> 
     <span class="list-no">3</span> 
     <h4 class="list-title">Hawaii</h4> 
     <br> 
     <small class="list-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</small> 
    </section> 
    </body> 
</html>

出典

2017-01-09 15:24:16 Saket

コンテナの外に番号/テキストを表示する方法

答えて

関連する問題