Fehler beim Ausrichten von Bildern

Ich möchte, dass alle Bilder auf der Seite zentriert sind, aber auch nacheinander mit Rändern und all dem. Das Problem ist, sie sind alle in einer geraden Linie wie folgt gezeichnet: , wenn sie von links nach rechts gehen sollten.Fehler beim Ausrichten von Bildern

Mein HTML/CSS:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Join the Team</title> 
    </head> 
    <style> 
    .__applyingfor { 
     width: 500px; 
     height: 150px; 
     margin: auto auto; 
     text-align: center; 
    } 

    .__applyoptions { 
     display: flex; 
     justify-content: center; 
    } 

    .__applyoptions ul{ 
     display: flex; 
     list-style-type: none; 
     margin: 0; 
     background-size: cover; 
     padding: 10px; 
    } 

    .__applyoptions ul li{ 
     margin-right: 1px; 
    } 

    .__applyoptions ul a{ 
     display: flex; 
     position: relative; 
    } 

    .__apply-normal:hover { 
     opacity: 1; 
    } 

    .__apply-hover { 
     top: 0; 
     left: 0; 
     position: absolute; 
     opacity: 0; 
    } 

    .__apply-hover:hover { 
     opacity: 1; 
    } 

    #__title { 
     font-size: 25px; 
    } 

    #__title:hover { 
     color: #18A7B2; 
    } 
    </style> 
    <body> 
    <div class="__applyingfor"> 
     <p id="__title">What Are You Applying For?</p> 
    </div> 
    <div class="__applyoptions"> 
     <ul> 
     <li> 
      <a href="#"> 
      <img class="__apply-normal" src="../images/helperapp.png"> 
      <img class="__apply-hover" src="../images/helperapph.png"> 
      </a> 
      <a href="#"> 
      <img class="__apply-normal" src="../images/modapp.png"> 
      <img class="__apply-hover" src="../images/modapph.png"> 
      </a> 
      <a href="#"> 
      <img class="__apply-normal" src="../images/adminapp.png"> 
      <img class="__apply-hover" src="../images/adminapph.png"> 
      </a> 
      <a href="#"> 
      <img class="__apply-normal" src="../images/devapp.png"> 
      <img class="__apply-hover" src="../images/devpph.png"> 
      </a> 
     </li> 
     </ul> 
    </div> 
    </body> 
</html>

Quelle

2017-04-26 Squallz

Use 'display: inline-block' anstatt 'display: flex' –

Sie können display: inline-flex; hinzufügen oder display:flex; in .__applyoptions ul a{ entfernen.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Join the Team</title> 
 
    </head> 
 
    <style> 
 
    .__applyingfor { 
 
     width: 500px; 
 
     height: 150px; 
 
     margin: auto auto; 
 
     text-align: center; 
 
    } 
 

 
    .__applyoptions { 
 
     display: flex; 
 
     justify-content: center; 
 
     
 
    } 
 

 
    .__applyoptions ul{ 
 
     display: flex; 
 
     list-style-type: none; 
 
     margin: 0; 
 
     background-size: cover; 
 
     padding: 10px; 
 
    } 
 

 
    .__applyoptions ul li{ 
 
     margin-right: 1px; 
 
     
 
    } 
 

 
    .__applyoptions ul a{ 
 
     display: inline-flex; 
 
     position: relative; 
 
    } 
 

 
    .__apply-normal:hover { 
 
     opacity: 1; 
 
    } 
 

 
    .__apply-hover { 
 
     top: 0; 
 
     left: 0; 
 
     position: absolute; 
 
     opacity: 0; 
 
    } 
 

 
    .__apply-hover:hover { 
 
     opacity: 1; 
 
    } 
 

 
    #__title { 
 
     font-size: 25px; 
 
    } 
 

 
    #__title:hover { 
 
     color: #18A7B2; 
 
    } 
 
    
 
    </style> 
 
    <body> 
 
    <div class="__applyingfor"> 
 
     <p id="__title">What Are You Applying For?</p> 
 
    </div> 
 
    <div class="__applyoptions"> 
 
     <ul> 
 
     <li> 
 
      <a href="#"> 
 
      <img class="__apply-normal" src="http://placehold.it/100x150"> 
 
      <img class="__apply-hover" src="http://placehold.it/100x150"> 
 
      </a> 
 
      <a href="#"> 
 
      <img class="__apply-normal" src="http://placehold.it/100x150"> 
 
      <img class="__apply-hover" src="http://placehold.it/100x150"> 
 
      </a> 
 
      <a href="#"> 
 
      <img class="__apply-normal" src="http://placehold.it/100x150"> 
 
      <img class="__apply-hover" src="http://placehold.it/100x150"> 
 
      </a> 
 
      <a href="#"> 
 
      <img class="__apply-normal" src="http://placehold.it/100x150"> 
 
      <img class="__apply-hover" src="http://placehold.it/100x150"> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2017-04-26 05:17:40 cosmoonot

Versuchen Sie dies. Entfernt display: flex; von __applyoptions ul a. Sie müssen display:flex; nur zum Container.

.__applyingfor { 
 
    width: 500px; 
 
    height: 150px; 
 
    margin: auto auto; 
 
    text-align: center; 
 
} 
 

 
.__applyoptions { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.__applyoptions ul { 
 
    display: flex; 
 
    flex-direction: row; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    background-size: cover; 
 
    padding: 10px; 
 
} 
 

 
.__applyoptions ul li { 
 
    margin-right: 1px; 
 
} 
 

 
.__applyoptions ul a { 
 
    position: relative; 
 
} 
 

 
.__apply-normal:hover { 
 
    opacity: 1; 
 
} 
 

 
.__apply-hover { 
 
    top: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 

 
.__apply-hover:hover { 
 
    opacity: 1; 
 
} 
 

 
#__title { 
 
    font-size: 25px; 
 
} 
 

 
#__title:hover { 
 
    color: #18A7B2; 
 
}

<body> 
 
    <div class="__applyingfor"> 
 
    <p id="__title">What Are You Applying For?</p> 
 
    </div> 
 
    <div class="__applyoptions"> 
 
    <ul> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="__apply-normal" src="../images/helperapp.png"> 
 
      <img class="__apply-hover" src="../images/helperapph.png"> 
 
     </a> 
 
     <a href="#"> 
 
      <img class="__apply-normal" src="../images/modapp.png"> 
 
      <img class="__apply-hover" src="../images/modapph.png"> 
 
     </a> 
 
     <a href="#"> 
 
      <img class="__apply-normal" src="../images/adminapp.png"> 
 
      <img class="__apply-hover" src="../images/adminapph.png"> 
 
     </a> 
 
     <a href="#"> 
 
      <img class="__apply-normal" src="../images/devapp.png"> 
 
      <img class="__apply-hover" src="../images/devpph.png"> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body>

Quelle

2017-04-26 05:12:02 athi

nur float:left; den .__ applyoptions hinzufügen ul a {} Abschnitt:

.__applyoptions ul a{ 
     display: flex; 
     position: relative; 
     float:left; 
    }

jsfiddle

Quelle

2017-04-26 05:12:03

Warum 'float: left 'wenn du einfach' display: inline-flex' machen kannst? – cosmoonot

Ersetzen Sie Ihren li Stil mit folgenden Eigenschaft:

.__applyoptions ul li { 
margin-right: 1px; 
float: left; 
display: inline-flex; 
}

Quelle

2017-04-26 05:18:56

Fehler beim Ausrichten von Bildern

Antwort

Verwandte Themen