Как отображать номер/текст за пределами контейнера

Я хочу добавить пользовательский 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; 
}

И переместил число слева, но число исчезло, как только когда он ушел с контейнера. Он также оставил абзац пространства, где он был бы. Я занимаюсь этим в течение часа, и я не уверен, что нужно изменить.

(Когда это изменяется для мобильного, я планирую @media запроса изменить его в нормальное состоянии. - но еще не получил, что далеко еще)

источник

2017-01-09 jonbon

Начните с очень быстрой и простой "список-стиль-позиции: снаружи. Если это приемлемо, это очень быстрое изменение. Если вы хотите, чтобы это было тонко отличается, это будет намного больше работы. –

Если у вас есть упорядоченный список, попробуйте что-то вроде: 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

Это работает, но * только * если я перехожу на позицию: absolute; - любая идея, почему? Когда у меня есть позиция: относительная; ничего не видно вообще – jonbon

Посмотрите на этом примере здесь я создал два контейнера родительский 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' pseudo. –

Спасибо, обязательно изучите их –

Если вы используете настраиваемый счетчик и абсолютно позиции пули в :before элементы можно форматировать это, как вам нравится:

.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

Как отображать номер/текст за пределами контейнера

ответ

Смежные вопросы