html
  • css
  • 2016-04-30 19 views 0 likes 
    0

    Wie Sie das P-Tag direkt unterhalb des Benutzernamens und nicht unterhalb des Bildes ausrichten, ohne Padding/margin-left.CSS entfernen Text unter einem Bild

    Code:

    <ul class="comments_list"> 
        <li> 
         <i> 
         <img src='{{image_path}}' /> 
         </i> 
         <span>User name</span> 
         <p>{{comment_text}}</p> 
        </li> 
    </ul> 
    
    +1

    Bitte auf Ihre Frage erarbeiten, es ist etwas unklar zu mir, was du gerade versuchst zu erreichen. Es wäre schön, wenn Sie ein Beispiel Ihres Problems in Form einer JSfiddle oder Website zeigen würden. – YSbakker

    Antwort

    0

    Ist das, was Sie tun möchten? Was ist Ihr CSS für 'class = "comments_list"' Verwenden Sie <i> für Kursiv?

    <ul class="comments_list"> 
     
        <li> 
     
         <i> 
     
         <img src=http://icons.iconarchive.com/icons/dryicons/simplistica/128/user-icon.png /> 
     
         </i> 
     
         </li> 
     
         </ul> 
     
    <span>User name</span> 
     
         <p>{{comment_text}}</p>

    +0

    Der Bereich ist neben dem Bild, da beide Inline sind. Das p ist eine neue Zeile und ich möchte, dass es unterhalb der Spanne und nicht unterhalb des Bildes liegt –

    0

    , wenn Sie nicht mit Flex dagegen haben, macht es die Dinge einfach zu tun: http://codepen.io/gc-nomade/pen/mPQeRM

    li { 
     
        display: inline-flex; 
     
        flex-flow: column wrap; 
     
        justify-content: center; 
     
        height: 128px; 
     
    }
    <ul class="comments_list"> 
     
        <li> 
     
        <i> 
     
         <img src=http://icons.iconarchive.com/icons/dryicons/simplistica/128/user-icon.png /> 
     
         </i> 
     
        <span>User name</span> 
     
        <p>{{comment_text}}</p> 
     
        </li> 
     
    </ul>

    Verwandte Themen