1. Zuhause
  2. Frage und Antwort
  3. Wie man Einzug in Listen mit CSS behält?

Wie man Einzug in Listen mit CSS behält?

2016-04-01 8 views
0

Ich habe den folgenden Code:Wie man Einzug in Listen mit CSS behält?

.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 
.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 
.page-content li:before { 
 
    content: "• "; 
 
    color: green; 
 
    margin-right: 10px; 
 
    line-height: 34px; 
 
    list-style-position: inside; 
 
}
<div class="page-content"> 
 

 
    <ul> 
 
    <li>short bullet</li> 
 
    <li>short bullet</li> 
 
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li> 
 
    </ul> 
 

 
</div>

Siehe JsFiddle

Wie Sie sehen können, wenn ein Listenelement je auf die paddingli verliert sie an eine zweite Linie geht/margin.

Gibt es eine Möglichkeit, die folgenden Zeilen mit der ersten Zeile übereinstimmen zu lassen?

Quelle

2016-04-01 nsilva

+0

Dies ist einer jener jemandes, wo das erste, was ich denke, ist „Sie nicht einmal eine schnelle Web-Suche versucht haben, haben ersten ya " dann siehst du eine Reihe von wiederholten Antworten von Jungs, die einfache Punkte suchen, anstatt sie als Duplikat zu schließen, obwohl es so viele Variationen gibt, dass ich nicht einmal sicher bin, was ich als Duplikat verwenden soll ... TGIF –

+0

Ich habe zuerst gesucht @ChrisW. und versuchte einige Lösungen, aber keine von ihnen funktionierte für mich. – nsilva

Antwort

2

können Sie margin-left:-20px zu li:before

.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 

 
.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 

 
.page-content li:before { 
 
    content: "• "; 
 
    color: green; 
 
    margin-right: 10px; 
 
    margin-left:-20px; 
 
    line-height: 34px; 
 
    list-style-position:inside; 
 
}
<div class="page-content"> 
 

 
    <ul> 
 
    <li>short bullet</li> 
 
    <li>short bullet</li> 
 
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li> 
 
    </ul> 
 

 
</div>

Eine andere Lösung text-indent:-1em in li

.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 
.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 
.page-content li { 
 
    text-indent: -1em 
 
} 
 
.page-content li:before { 
 
    content: "• "; 
 
    color: green; 
 
    margin-right: 10px; 
 
    line-height: 34px; 
 
    list-style-position: inside; 
 
}
<div class="page-content"> 
 

 
    <ul> 
 
    <li>short bullet</li> 
 
    <li>short bullet</li> 
 
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li> 
 
    </ul> 
 

 
</div>

0 verwenden könnte hinzufügen

Quelle

2016-04-01 15:16:01 dippas

1

Hier ist eine Möglichkeit, es zu tun. Fügen Sie dem Element li ein paar Links hinzu und verwenden Sie dann die absolute Positionierung, um den Marker nach links zu verschieben.

Der Ansatz gibt Ihnen eine Menge Kontrolle über die Position des Markers. Darüber hinaus bleibt die Markerposition stabil, wenn Sie die Größe oder den Stil des Markerelements ändern.

.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 

 
.page-content ul { 
 
    list-style: none; 
 
    margin-bottom: 15px; 
 
    line-height: 34px; 
 
    color: rgba(204, 204, 204, 1); 
 
} 
 
.page-content li { 
 
    padding-left: 15px; 
 
    position: relative; 
 
} 
 
.page-content li:before { 
 
    content: "• "; 
 
    color: @green; 
 
    margin-right: 0px; 
 
    line-height: 34px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
}
<div class="page-content"> 
 

 
    <ul> 
 
    <li>short bullet</li> 
 
    <li>short bullet</li> 
 
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li> 
 
    </ul> 
 

 
</div>

Quelle

2016-04-01 15:16:30

+0

oder einfach .page-content li {text-indent: -1em;} –

Verwandte Themen

 Verwandte Themen