html - How do i align photos -


i've tried play % photos keep clipping each other instead of sitting side side.im trying each photo sit next each other horizontally.any ideas on im doing wrong? ps im new coding if easy fix bad

snippet:

body{    margin:0 auto 0 auto;  	max-width: 750px;  }    li{  	display:inline-block;  	width:25%;  }
<div class="uno">  	  <li>anime</li>  	<ol>  		<li>          <a href="http://cowboybebop.wikia.com/wiki/main_page">            <img src="http://i.imgur.com/rmlplky.jpg"               alt="see in space cowboy..." width="500" hight="500"                  >cowboy bebop</li>`                                                                                                 	          <li>        <a href="http://fma.wikia.com/wiki/main_page">         <img src="http://68.media.tumblr.com/291ca87d855bf9fce76a148b3ebbf262/tumblr_n4ygiesfsg1sji00bo1_1280.jpg"          alt="best alchemist" width="500" hight="500"           >full metal alchemist</li>    	      <li>            <a href="http://gundam.wikia.com/wiki/mobile_suit_gundam_wing">             <img src="http://cdn.pcwallart.com/images/gundam-wing-deathscythe-wallpaper-2.jpg" alt="death scythe" width="500" hight="500"                       >gundam wing</li>    		         		        <li>            <a href="http://champloo.wikia.com/wiki/samurai_champloo_wiki">              <img src="https://i.pinimg.com/originals/26/5b/c7/265bc7d70425503b0e9c9c3226b4bfcd.jpg"                alt="jin fuu mugen" width="500" hight="500"                   >samurai champloo</a></li>  	</ol></div>

i display: flex; on ol. did not close <a> in list making invalid markup.

.uno-list {    list-style: none;    display: flex;    flex-wrap: wrap;  }    .uno-list li {    flex-basis: 25%;    margin-bottom: 10px;    margin-right: 10px;    background-color: deeppink;  }    .uno-list {    display: block;  }    .uno-list img {    width: 100%;    position: relative;    top: 0;  }
<div class="uno">    <ol class="uno-list">      <li>        <a href="http://cowboybebop.wikia.com/wiki/main_page">          <img src="http://i.imgur.com/rmlplky.jpg" alt="see in space cowboy..." width="500" hight="500"> cowboy bebop</a>      </li>        <li>        <a href="http://fma.wikia.com/wiki/main_page">          <img src="http://68.media.tumblr.com/291ca87d855bf9fce76a148b3ebbf262/tumblr_n4ygiesfsg1sji00bo1_1280.jpg" alt="best alchemist" width="500" hight="500"> full metal alchemist        </a>      </li>          <li>        <a href="http://gundam.wikia.com/wiki/mobile_suit_gundam_wing">          <img src="http://cdn.pcwallart.com/images/gundam-wing-deathscythe-wallpaper-2.jpg" alt="death scythe" width="500" hight="500"> gundam wing        </a>      </li>          <li>        <a href="http://champloo.wikia.com/wiki/samurai_champloo_wiki">          <img src="https://i.pinimg.com/originals/26/5b/c7/265bc7d70425503b0e9c9c3226b4bfcd.jpg" alt="jin fuu mugen" width="500" hight="500">samurai champloo</a>      </li>    </ol>  </div>


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -