Hyperlinks mögen nicht Display Flex in Elternelement

Meine Hyperlinks in meinem li Elemente werden unglaublich seltsam angezeigt. Sie wickeln sich um Wörter usw. ein. Bitte beachten Sie das Beispiel unten für den Fehler, da er schwer zu erklären ist.Hyperlinks mögen nicht Display Flex in Elternelement

Ich weiß, die Ursache ist mein CSS li { display: flex; }, aber ich brauche dies, um das Geschoss vertikal richtig auszurichten. Wie kann ich die Anzeige meiner Anker in meinen li Elementen so einstellen, dass 'normal' angezeigt wird?

ol, 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ol { 
 
    counter-reset: foo; 
 
    display: table; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    counter-increment: foo; 
 
    display: flex; 
 
} 
 

 
li::before { 
 
    content: "•"; 
 
    text-align: right; 
 
    padding-right: .3em; 
 
    color: $mht-blue; 
 
    font-size: 225%; 
 
    line-height: .6; 
 
}

<ul> 
 

 
    <li> 
 
    How can I make the dot vertically lower? Ie, centered on the first line of text? sed do eiusmod tempor incididunt ut labore et <a href="">dolore magna aliqua. Ut enim ad</a> minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
 
    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </li> 
 
    <li> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </li> 
 
</ul>

Quelle

2017-05-15 Jake M

Es wäre großartig, wenn Sie die Antwort akzeptieren könnten, die Ihre Frage am besten löst, oder wenn keine, oder lassen Sie uns wissen, was fehlt, damit wir eine finden, die das tut. – LGSon

ol, 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ol { 
 
    counter-reset: foo; 
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
li::before { 
 
    content: "•"; 
 
    text-align: right; 
 
    padding-right: .3em; 
 
    color: blue; 
 
    font-size: 225%; 
 
    line-height: .6em; 
 
    margin-left: -.75em; 
 
    display: block; 
 
    float: left; 
 
}

<ul> 
 

 
    <li> 
 
    How can I make the dot vertically lower? Ie, centered on the first line of text? sed do eiusmod tempor incididunt ut labore et <a href="">dolore magna aliqua. Ut enim ad</a> minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
 
    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </li> 
 
    <li> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </li> 
 
</ul>

Verwendung float: left und negativer Marge die Kugel an Ort und Stelle zu setzen.

Quelle

2017-05-15 04:16:09 Gerard

Bitte entfernen Sie Styles für 'ol', weil sie nicht relevant sind, und geben Sie an, dass' float: left; 'und negative margin den Trick machen. –

den Text in einem anderen Elemente gelegt, so dass die a kein flex Kind ist.

ol, 
 
li, 
 
p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ol { 
 
    counter-reset: foo; 
 
    display: table; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    counter-increment: foo; 
 
    display: flex; 
 
} 
 

 
li::before { 
 
    content: "•"; 
 
    text-align: right; 
 
    padding-right: .3em; 
 
    color: $mht-blue; 
 
    font-size: 225%; 
 
    line-height: .6; 
 
}

<ul> 
 
    <li> 
 
    <p> 
 
     How can I make the dot vertically lower? Ie, centered on the first line of text? sed do eiusmod tempor incididunt ut labore et <a href="">dolore magna aliqua. Ut enim ad</a> minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
 
     ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    </li> 
 
    <li> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    </li> 
 
</ul>

Quelle

2017-05-15 02:44:06

Danke, das funktioniert, aber meine Benutzer werden einen CMS Rich Text Editor verwenden. Was bedeutet, dass sie 'ul's erstellen können und ich nicht viel Kontrolle darüber habe, wie sie' p' in jedes 'li' setzen. Gibt es eine CSS-Lösung wie li> a {display: something ?; } '. Ich habe 'Display: Inline-Block;' und andere, aber nicht Glück versucht. Irgendwelche Ideen? –

Hyperlinks mögen nicht Display Flex in Elternelement

Antwort

Verwandte Themen